CSS Grid Cheat Sheet
Interactive visual guide to CSS Grid Layout. Click values to see them in action.
grid-template-columns
Defines the column structure of the grid.
grid-template-rows
Defines the row structure of the grid.
gap
Sets the spacing between grid cells.
justify-items
Aligns grid items along the inline (row) axis.
align-items
Aligns grid items along the block (column) axis.
Live Preview
1
2
3
4
5
6
Common Grid Patterns
| Pattern | Code |
|---|---|
| Equal columns | grid-template-columns: repeat(3, 1fr) |
| Holy grail layout | grid-template-columns: 200px 1fr 200px |
| Responsive auto-fill | grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) |
| Span columns | grid-column: 1 / 3 (on the item) |
| Span rows | grid-row: 1 / 3 (on the item) |
| Named areas | grid-template-areas: "header header" "sidebar main" "footer footer" |