This CSS Grid cheat sheet lists the properties for two-dimensional grid layouts — defining columns and rows, gaps, and placing items.
Container
| Property | What it does |
|---|---|
| display: grid | Make a grid container |
| grid-template-columns: 1fr 1fr | Define columns |
| grid-template-rows: auto | Define rows |
| repeat(3, 1fr) | Repeat columns/rows |
| minmax(100px, 1fr) | Min/max track size |
| gap: 1rem | Gap between cells |
| justify-items / align-items | Align items in cells |
Items
| Property | What it does |
|---|---|
| grid-column: 1 / 3 | Span columns 1-2 |
| grid-row: 1 / 3 | Span rows 1-2 |
| grid-area: a | Place into a named area |
| justify-self / align-self | Align one item |