Updated June 29, 2026
CSS Grid cheat sheet
Grid lays out content in rows and columns at the same time. You define tracks on the container, then place items into them. These are the properties you reach for most.
On the container
| Property | What it does |
|---|---|
display: grid | Turns an element into a grid container. |
grid-template-columns: 1fr 1fr | Defines the column tracks. |
grid-template-rows: auto 1fr | Defines the row tracks. |
gap: 1rem | Sets spacing between rows and columns. |
grid-template-areas: "a b" | Names regions for items to slot into. |
justify-items: center | Aligns items along the row (inline) axis. |
align-items: center | Aligns items along the column (block) axis. |
On the items
| Property | What it does |
|---|---|
grid-column: 1 / 3 | Span from column line 1 to 3. |
grid-row: 1 / 2 | Span from row line 1 to 2. |
grid-column: span 2 | Span two columns from the current position. |
grid-area: a | Place the item into a named area. |
justify-self: end | Align a single item on the row axis. |
Track sizing
| Value | What it does |
|---|---|
1fr | One fraction of the leftover space. |
minmax(150px, 1fr) | At least 150px, growing to fill space. |
repeat(3, 1fr) | Three equal columns. |
repeat(auto-fit, minmax(200px, 1fr)) | Responsive columns that wrap to fit. |
auto | Sized to the item's content. |
Grid vs FlexboxGrid is two-dimensional (rows and columns together); Flexbox is one-dimensional (a single row or column). Use Grid for page-level layout and Flexbox for a row of controls. See the Flexbox cheat sheet.
References
Questions
What does the fr unit mean?
fr is a fraction of the available space in the grid. Two columns of 1fr each split the leftover space equally; 2fr and 1fr split it two-to-one.
When should I use Grid instead of Flexbox?
Use Grid when you need to control rows and columns together, like a page layout. Use Flexbox for one direction at a time, like a toolbar of buttons.