CSS Grid if you have 5 mins or 10 mins Learning by Doing

We will learn by making the below layout.

The layout

5 Mins

Grid is the layout structured by row x column.

We specify how many row and column by setting

  1. grid-column-template
  2. grid-row-template

Grid layout is set at the parent (just like flex).

One equal cell is specify by 1fr.

.parent {
display: grid;
grid-column-template: 1fr 1fr;
grid-row-template: 1fr 1fr;
}

For 2x2 grid, the counting work like this:

  1  2  3 <-- column 1,2,3
1 ------- <-- row 1
| | |
2 ------- <-- row 2
| | |
3 ------- <-- row 3

Then we specify the grid start and end by setting the properties grid-column and grid-row.

.red {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.green {
grid-column: 2 / 3;
grid-row: 1 / 3;
}
.blue {
grid-column: 1 / 2;
grid-row: 2 / 3;
}

10 mins

The above example need a lot of mental energy.

Here we need ‘Alias’ where easy for our brain.

This is achievable with grid-area.
Grid assume equal cell then we will omit the 1fr part.

.parent {
display: grid;
grid-template-areas:
"upper-left right"
"lower-left right";
}
.red {
grid-area: upper-left;
}
.green {
grid-area: right;
}
.blue {
grid-area: lower-left;
}

Isn’t it easier? Yep.

If you have more time

You can learn the rest of the properties to adjust stuff inside grid

e.g. justify-content , align-content , …

but you if don’t have time.

You can anyway achieve that properties with other familiar tool like padding, margin, flex etc.

Hope this help !