🎯Preface :
Welcome back friends, here is the second article on CSS grids. We are going to cover some grid properties on the grid container which will help us in placing content. So let's get started.
🎏 justify-items :
This property aligns items in a grid cell along the horizontal axis ( inline direction ). This property gets applied to all the grid items.
syntax:
.container {
justify-items: start | end | center | stretch ;
}
start - It will align all the items to the start of the cell. By default, items are aligned to start.
end - It will align all the items to the end of the cell.
centre - It will align all the items to the centre of the cell.
stretch - It will stretch the items and fill the remaining space of the grid cell.
Example:
Here in the above example, you can see the working of justify-items: centre; property. You can run the other two also by uncommenting them. Run one at a time.
🎏 align-items :
This property aligns items in a grid cell along the (block) column axis. This property gets applied to all the grid items in a container.
syntax :
.container {
align-items: start | end | centre | stretch;
}
start - It will align all the items to the start of the cell. By default, items are aligned to start.
end - It will align all the items to the end of the cell.
centre - It will align all the items to the centre of the cell.
stretch - It will stretch the items and fill the remaining space of the grid cell.
As this property is the same as the above property you can try this property as an exercise on your machine.
🎏place-items :
This is a short-hand property for justify-items and align-items and sets both properties in one go.
syntax :
.container {
display : grid ;
place-items : <align-items> / <justify-items> ;
}
<align-items>: this will set the align-items property.
<justify-items>: this will set the justify-items property.
Example :
You can see the output of the property applied to the container.
🎏 grid-auto-columns & grid-auto-rows :
This property gives size to any auto-generated column or row. The auto-generated rows or columns are also called implicit grid tracks. These tracks get generated when we declare more grid items than grid cells OR any item gets placed out of the container.
If you c/p this code to your machine and inspect it then go to layout and click on a grid line.
you will see we have placed item2 in column 6. But we never defined column 6 you can check it in the CSS file. This extra column gets defined automatically and gets a space of 0 px.
This property allows us to give definite space to that undeclared (implicit) grid track.
syntax :
.container {
grid-auto-columns: 20px;
grid-auto-rows: 20px;
}
The above property gives 20 px of space to auto-generated tracks. Just try this property on your own with different values and inspect it you will get it.
So these are some of the properties on the grid container. In the next article, we will discuss the properties of grid child ( items ).
Social links :
Linkedin : http://www.linkedin.com/in/kaushik-gabhane-013708203
Instagram : https://www.instagram.com/kaushikgabhane?r=nametag