CSS Grid is a powerful CSS technique for creating two-dimensional layouts (horizontal and vertical at the same time).
It is a better fit than Flexbox when you build magazine layouts, dashboards, and complex page structures.
1. Basic Grid Setup
.container {
display: grid;
/* Define columns */
grid-template-columns: 200px 1fr 1fr; /* fixed 200px + two equal columns */
grid-template-columns: repeat(3, 1fr); /* three equal columns */
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* responsive */
/* Define rows */
grid-template-rows: auto 1fr auto; /* top / middle / bottom */
grid-template-rows: 80px 1fr 60px;
/* Gaps */
gap: 20px;
row-gap: 16px;
column-gap: 24px;
}
2. The fr Unit
fr represents a share of the remaining space.
.grid {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
/* Split the whole into 4 parts: first column 1/4, second column 2/4 (half), third column 1/4 */
}
3. Placing Items (grid-column, grid-row)
/* Specify which line an item starts and ends on */
.item {
grid-column: 1 / 3; /* starts at line 1, ends at line 3 (spans 2 columns) */
grid-column: 1 / -1; /* first line to last line (full width) */
grid-column: span 2; /* span 2 columns (from the current position) */
grid-row: 1 / 3; /* spans 2 rows */
grid-row: span 2;
}
4. grid-template-areas
This defines a layout visually by name.
.container {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: 60px 1fr 40px;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
5. auto-fill vs auto-fit
/* auto-fill: creates as many columns as possible, empty columns may remain */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
/* auto-fit: fills columns to fit the items, empty columns collapse to 0 */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
6. Alignment
.container {
justify-items: start | center | end | stretch; /* horizontal alignment inside a cell */
align-items: start | center | end | stretch; /* vertical alignment inside a cell */
justify-content: start | center | space-between; /* horizontal alignment of the whole grid */
align-content: start | center | space-between; /* vertical alignment of the whole grid */
}
.item {
justify-self: center; /* horizontally center only this item */
align-self: end; /* vertically align only this item to the end */
}
7. Flexbox vs Grid — How to Choose
| Situation | Recommendation |
|---|---|
| Aligning in only one direction (horizontal or vertical) | Flexbox |
| Need to control both directions at once | Grid |
| Items have irregular sizes | Flexbox |
| A layout with defined rows and columns | Grid |
| Navigation, button groups | Flexbox |
| Whole-page layouts, dashboards | Grid |
In practice, a common pattern is to build the overall layout with Grid and implement the inner components with Flexbox.
Example Files
Open grid-layout.html in the examples/ folder to see the magazine layout.
Assignment
Read assignment.md and try building a dashboard layout.