You know that CSS Grid is the most powerful layout system in CSS but it’s hard to get started with. Or maybe you have tried and failed.
Wouldn't it be great if you could learn everything you need to use CSS Grid successfully in one place from beginner to advance concepts?
With this one-stop guide you will learn all the skills you need to succeed with CSS Grid.
Are you ready to get started? Let's begin.
I'm going with really simplified approach, so you can understand CSS grids with the easiest way possible.
You may have heard about parent child relationship in html elements.
Below is an example:
As you can see a parent has three children.
First child is a front-end developer, second child is a back-end developer and third is full-stack developer.
Fast forward, I have added some basic styles to the parent and children like colors, padding etc.
Below is the output:
In CSS grids, we have different properties for parent and children.
Below are the list of CSS Grid parent properties which you will learn:
In CSS, you are already familiar with display property right?
You can now use display: grid; (block level) or display: inline-grid; (Inline level)
If you don't know about CSS block and inline level.
block level: Which straighten the element to occupy the complete space.
inline level: It doesn't occupy any additional space other than the element or inside content.
Most of the time you will use display: grid;
So, what it does?
It gives super powers to all the direct children of parent, without it you can not use CSS grid properties.
So, it is the first and important property that you will put inside for initiating CSS Grids.
After adding display: grid; you will notice nothing because all the elements or children inside parent are div which is already block-level element, but behind the scenes, you have given so many powers to the children.
Creating columns is now easier then ever.
Lets say, we want to create two columns the first one is 20% and the second one should be 80%.
So, you see we created two columns successfully.
The third child automatically moved to the first column and second row.
Just note: These columns are not yet responsive, but don't worry we will look into the responsive part later.
You can make any number of columns.
What if you want three equal columns.
For that, you can use the percentage as well like (33.33% 33.33% 33.33%).
But you should utilize fr(fraction) unit.
Fr unit automatically adjusts the pixels to occupy the complete remaining space.
1fr means single space, 2 means double space, and so on.
If you put 2fr for the second column it will consume much larger space than the other two.
And yes you can combine it with any other unit like 20% 1fr 160px
Not only that you can use this unit for rows as well. We will look into that later.
So, the possibilities are endless.
From our example, let's say you divide it into 2 columns with 1fr 1fr the third child will automatically go to the second row.
You see, that it has been adjusted automatically.
If you want the first row to remain the same and the second row with the row height of 200px, you will need to utilize grid-template-rows with values like 1fr 200px
Now, you know about rows and columns and want a gap or spacing.
Let's say, you want to put 10px of space for columns and 30px for rows
You can use the property column-gap for columns and row-gap for rows.
There is a shorthand property called gap which contains row-gap and column-gap together.
In simple words, you are telling the CSS grid to add the limit value like min-width and max-width of the specified column.
It accepts two parameters (the minimum width of column, the maximum width of column)
Note: You can also use minmax() with grid-template-rows, grid-auto-columns, and grid-auto-rows.
Now, you can see the first column is using minmax().
If you will minimize your screen, you will see that the first column will stick on 100px.
What if you want 20 columns with 100px. So, instead of writing 100px for 20 times in grid-template-columns, you can use the repeat() function.
It accepts two parameters (How many columns you want, width of columns)
grid-template-columns: repeat(20, 100px)
Note: You can also use repeat() with grid-template-rows.
In our case, we have two repeated columns.
What if you want flexible columns without defining the explicit column numbers.
Like, what if you are not sure how many columns do you need and you want flexibility or auto adjustments of columns according to the children?
In repeat() function, you can define two powerful values (auto-fill or auto-fit) in place of column number.
auto-fill automatically did its calculation and return 4 columns without us worrying about the column number.
There is a slight difference between auto-fill and auto-fit, which I will cover later. For now, let's be simple and consider both same.
What if you have defined grid-template-rows for two rows. What will happen to the children after two rows?
To cover up this challenge, we can utilize grid-auto-rows.
You can easily define your desired row height automatically for all the remaining rows at once.
It is used to align children in the vertical direction of the grid cell. It accepts following values:
It is used to align children in the horizontal direction of the grid cell. It accepts following values:
It is used to align, grid container in the vertical direction of the grid. It accepts following values:
It is used to align, grid container in the horizontal direction of the grid. It accepts following values:
Below is the list of CSS Grid children properties that you will learn:
What if you want to explicitly move the element from one row to another?
If the child is in the 1st row and you want to move to the second.
You can easily do that with grid-row.
It's a short form for grid-row-start and grid-row-end.
Here you put the line number of the row from where you are starting.
Here you put the line number of row till where you want to end.
Below is an image for row line numbers:
Let's move the front-end developer (first child & first row) in the Graphic designer's place (fourth child & 2nd row).
Row second starts with line number 2 and ends on line number 3:
What if you want to explicitly move the element from one column to another?
If the child is in the first column and you want to move to the second.
You can easily do that with grid-column.
It's a short form for grid-column-start and grid-column-end.
grid-column-start: Here you put the line number of the column from where you are starting.
grid-column-end: Here you put the line number of the column till where you want to end.
Below is an image for column line numbers:
Let's now move the front-end developer (first child & 1st column) in the place of the Full-stack developer (third child & 3rd column).
Note: The other two children moved into the second row automatically. The reason is that we didn't define grid-row for this child.
By adding grid-row explicitly will fix this issue.
Now, that you have learned about grid-column and grid-row.
Here is an example of expanding the columns.
Case Column: Expand the first child to consume the space of the second column as well.
grid-column: 1 / 3; (Short form of start and end)
Case Row: Now, expand the first child to consume the space of the second row as well.
Now, there is a simpler way as well. You can use the value inside grid-column or row that is span.
It means, how much consumption you want in a column or grid.
Like span 2 means, consume two columns or rows.
And yes you can combine it with the start and end concept.
Like, start with 3 and then consume 2 further columns or rows.
It is used to align individual children in the vertical direction of the grid cell. It accepts the following values:
Tip: It works the same as align-items (grid container property). The difference is align-self can be used to align children individually.
Example: You may want the first children in the middle of the grid cell or the third children at the end of the grid cell.
It is used to align individual children in the horizontal direction of the grid cell. It accepts the following values:
Tip: It works the same as justify-items (grid container property). The difference is justify-self can be used to align children individually.
Example: You may want the first children in the center of the grid cell or the third children at the end of the grid cell.
It's an optional and powerful CSS grid parent property. I'm placing it here, so you can grab the concept easily.
You can use it after defining grid-template columns or rows in the parent.
You can easily name the desired grid system like where to place the first child and where to place the second child so on.
Let's say, we have the below layout.
Now, I want to place the grid items like:
Normally, you can do this with grid-column and grid-row property right?
But, instead of using them, you can simply use grid-area to name each child.
In Children or items:
The best part is you can now simply change the complete layout with grid-template-areas.
Let's say you want:
You should always fulfill grid placement. Otherwise, it will break the layout.
Like below, you can see in order to fulfill the third column in the last row I put the dot (which will consider as an empty column)
I have already explained what is necessary for this property, but you can always visit MDN Web Docs and learn grid-template-areas if you need further knowledge.
Grid is composed of grid lines, grid tracks, grid cell, grid area, grid gaps, grid item & grid container.
Vertical and horizontal lines, that divide up the grid and separate the columns and rows are called grid lines.
There are numbers assigned to each row and column.
From the above example: Grid Line Columns(1,2,3,4) & Grid Line Rows (1, 2, 3).
The container, where you will give superpowers. You can call it the main parent css grid container where you can define how many columns, rows & gaps you want.
It's the direct children inside the CSS grid container. Let's say the parent has 3 Children or a grid container has 3 items.
You can consider it a block where you can place the grid items explicitly(Manually) or implicitly (By force).
The area between two vertical and two horizontal grid lines is called a grid area.
The space between two grid lines is called a track, no matter if it's vertical(column) or horizontal(row).
Grid Column track (1 -> 2, 2 -> 3, 3 -> 4)
Grid Row Track (1 -> 2, 2 -> 3, 3 -> 4)
The space between the rows and columns is called gaps or gutters.
Guide under process: I'm writing and publishing this guide daily.
If you want to get updates, make sure to subscribe to our newsletter and allow notifications.
One more thing, I'm also working on CSS grids eBook, Cheat-sheet and Course.