Hey Fellow Developers, today I'll be explaining how CSS-Grid works. So let's dig in.
First things first, What is a CSS grid?
The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.
Let's see how they work with a simple Example.
.grid-container {
display: grid;
padding: 10px;
background-color: pink;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px;
}
In the above code, Display is Grid for working with its properties. Then if look at line number 4, it says
grid-template-columns: 100px 100px 100px;
This tells browser to make 3 Columns of 100px each.
Same with line number 5, it says
grid-template-rows: 100px 100px;
This tells browser to make 2 Rows of 100px each.
Let's take a look at the HTML code.
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>
Look at the code, it has a main div with a class called "grid-container" and within that container, it has 6 divs with a class called "grid-item". Now, what CSS grid will do? It will place these 6 divs in such a way that they fulfill these statements.
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px;
It will make 2 Rows of 100px each and 3 Columns of 100px each. Look at the output below.
If we change
grid-template-columns: 100px 100px 100px;
to
grid-template-columns: 100px 100px;
and
grid-template-rows: 100px 100px;
to
grid-template-rows: 100px 100px 100px;
It will work opposite to the above one.
Yes, you guessed it right. 3 Rows and 2 Columns 100px each.
Moving on, what if we don't know the size of Rows and Columns and want to make them flexible?
Don't worry, CSS Grid got that covered too. You just have to make a few changes to your code. Instead of giving some sizes like "100px" we can use a keyword called "auto", andddd that's it.
grid-template-columns: auto auto auto;
This "auto" keyword will size the columns dynamically according to the screen width and cover the whole screen.
Look at the Output below.
Feel free to play around with it.
To give some gaps between Grid, we can use
grid-gap: 6px;
This will give the spacing of 6px between every grid item.
We can also align and justify the items.
Justify Items
Aligns content in a grid item along the row axis.
Look at the Code-Pen below for a better understanding.
And the opposite is true for Align Items, i.e.
It aligns content in a grid item along the column axis.
Take a look at this.
Sometimes it behaves weird, like "align-items: end" and "align-items: center" look similar.
Phew!
Just 2 more properties and we are done.
Now after justifying and aligning items, what if we want to align the whole content?
So there are these properties called "justify-content" and "align-content" those will do the work.
Justify-Content
Justifies all grid content on row axis when total grid size is smaller than a container.
Have a look at this Code-Pen below.
Here also, the opposite is true for Align-Content, i.e.
Justifies all grid content on column axis when total grid size is smaller than a container.
The values for these properties are self-explanatory.
There is much more about CSS Grid out there, make sure you read that too.
Attached below is the Code-Pen Collection about CSS-Grid.
Ending it here, Thank you for reading, please give it a 👍 if it helped you.