CSS Grid is the layout system for building two-dimensional layouts — rows and columns together — with far less code than older techniques. This cheat sheet groups every Grid property by task: defining tracks, sizing them, spacing, placing items, and aligning everything.
Keep this page handy while you build page and component layouts. Each property is shown with the value you would write and a short explanation. For one-dimensional rows or columns, pair this with the <a href="/cheatsheet/css-flexbox">CSS Flexbox cheat sheet</a>.
Container Setup
| Property / Value | What it does |
|---|
display: grid | Make an element a block-level grid container. |
display: inline-grid | Make a grid container that flows inline. |
grid-template-columns: 1fr 1fr 1fr | Define three equal-width columns. |
grid-template-columns: repeat(3, 1fr) | Shorthand for three equal columns. |
grid-template-columns: 200px auto | Fixed first column, flexible second column. |
grid-template-rows: 100px auto | Define the height of row tracks. |
grid-template-areas: "header header" | Name grid areas to lay out by name. |
grid-auto-flow: row | Control how auto-placed items flow (row or column). |
grid-auto-rows: minmax(100px, auto) | Size rows that are created implicitly. |
Sizing & Units
| Property / Value | What it does |
|---|
1fr | One fraction of the remaining free space. |
repeat(auto-fit, minmax(200px, 1fr)) | Responsive columns with no media queries. |
repeat(auto-fill, 200px) | Fit as many fixed-width tracks as possible. |
minmax(100px, 1fr) | A track that sits between a min and max size. |
min-content / max-content | Size a track to its smallest or largest content. |
Spacing
| Property / Value | What it does |
|---|
gap: 1rem | Space between rows and columns. |
row-gap: 1rem | Space between rows only. |
column-gap: 1rem | Space between columns only. |
Item Placement
| Property / Value | What it does |
|---|
grid-column: 1 / 3 | Span an item from column line 1 to line 3. |
grid-column: span 2 | Span an item across two columns. |
grid-row: 1 / 4 | Span an item from row line 1 to line 4. |
grid-area: header | Place an item into a named grid area. |
grid-area: 1 / 1 / 3 / 3 | row-start / col-start / row-end / col-end. |
Alignment
| Property / Value | What it does |
|---|
justify-items: center | Align items horizontally within their cells. |
align-items: center | Align items vertically within their cells. |
place-items: center | Shorthand for align-items and justify-items. |
justify-content: center | Align the whole grid horizontally in the container. |
align-content: center | Align the whole grid vertically in the container. |
justify-self: end | Align a single item horizontally in its cell. |
align-self: start | Align a single item vertically in its cell. |
CSS Grid Cheat Sheet FAQs
What is the difference between CSS Grid and Flexbox?
Grid is two-dimensional — it controls rows and columns at the same time, ideal for page layouts.
Flexbox is one-dimensional — it lays items out in a single row or column. Many layouts use Grid for the overall structure and Flexbox inside individual cells.
What does the fr unit mean in CSS Grid?
The fr unit represents a fraction of the free space in the grid container. grid-template-columns: 1fr 2fr makes the second column twice as wide as the first, after any fixed-size tracks are subtracted.
How do I make a responsive grid without media queries?
Use grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)). Columns are at least 200px wide and grow to fill the row, automatically wrapping to new rows as the container shrinks — no breakpoints needed.
What is the difference between auto-fit and auto-fill?
Both create as many tracks as fit. With auto-fill, empty tracks are kept, so existing items don't stretch. With auto-fit, empty tracks collapse and items expand to fill the row. Use auto-fit when you want items to grow to use all the space.
How do I place an item across multiple columns?
Use grid-column: 1 / 3 to span from column line 1 to line 3, or grid-column: span 2 to span two columns from wherever the item is placed. The same works for rows with grid-row.
What does grid-template-areas do?
It lets you name regions of the grid and place items by name. You define the layout as a visual map of strings on the container, then set grid-area: header on a child to drop it into that named region — a very readable way to build layouts.
How do I center content inside a grid?
Use place-items: center on the container to center every item within its cell, both horizontally and vertically. It is shorthand for align-items plus justify-items.
