CSS Grid cheat sheet
Every property that does something, what it accepts, and the reason you would reach for it. Grouped the way you actually think about a grid: first the container, then the items, then the track values that decide how it responds.
Container properties
Set on the grid container. These define the tracks and how everything inside is distributed.
| Property | Values | Notes |
|---|---|---|
display | grid | inline-grid | Makes the element a grid container. Its direct children become grid items; deeper descendants are unaffected. |
grid-template-columns | <track-list> | Defines the column tracks. Accepts lengths, percentages, fr, auto, min-content, max-content, minmax() and repeat(). |
grid-template-rows | <track-list> | Same, for rows. Rows you do not declare are created implicitly and sized by grid-auto-rows. |
grid-template-areas | "a b" "c d" | none | Names rectangular regions as an ASCII map. One quoted string per row. A dot leaves a cell empty. |
gap | <row-gap> <column-gap> | Space between tracks — never around the outside. One value sets both axes. |
justify-items | stretch | start | end | center | Inline-axis alignment of every item inside its own cell. Defaults to stretch. |
align-items | stretch | start | end | center | baseline | Block-axis equivalent. This is what makes cards in a row match heights by default. |
justify-content | start | end | center | space-between | space-around | space-evenly | Distributes the whole grid inside the container when the tracks are narrower than it. |
align-content | start | end | center | space-between | space-around | space-evenly | Same on the block axis. Only does anything when the container is taller than its rows. |
grid-auto-flow | row | column | dense | How auto-placed items fill the grid. `dense` back-fills earlier holes, which can reorder items visually away from DOM order. |
grid-auto-rows | <track-size> | Size for implicitly created rows — the ones beyond your declared template. |
Item properties
Set on the children. These place an item on the grid and override the container defaults for that one item.
| Property | Values | Notes |
|---|---|---|
grid-column | <start> / <end> | Shorthand for grid-column-start / grid-column-end. Line numbers, not track numbers — column 1 spans line 1 to line 2. |
grid-row | <start> / <end> | Same on the row axis. |
grid-area | <name> | <r-start> / <c-start> / <r-end> / <c-end> | Either the name from grid-template-areas, or all four lines at once. Note the row-first order. |
span | span <n> | Used in place of an end line: `grid-column: 2 / span 3` starts at line 2 and covers three tracks. |
justify-self | stretch | start | end | center | Overrides justify-items for this item. |
align-self | stretch | start | end | center | baseline | Overrides align-items for this item. |
order | <integer> | Changes visual order without touching the DOM — which is exactly why it needs care: focus order does not follow it. |
Track size values
What you can put in a track list, and when each one is the right answer.
| Property | Values | Notes |
|---|---|---|
200px / 20% / 10rem | fixed | An exact size. Does not respond to available space. |
1fr | fraction of free space | Splits whatever is left after fixed tracks and gaps. Shorthand for minmax(auto, 1fr) — which is why it can refuse to shrink. |
minmax(0, 1fr) | fraction, allowed to shrink | The fix for content overflowing a 1fr track. Use it for any column holding images or long unbroken strings. |
auto | content-sized, but stretchy | As large as its content needs; will also absorb leftover space if no fr track is present. |
min-content | smallest without overflow | The width of the longest unbreakable word. |
max-content | largest ideal size | The width the content would take with no wrapping at all. |
minmax(200px, 1fr) | bounded fraction | Never below 200px, otherwise fluid. The workhorse of responsive card grids. |
fit-content(300px) | clamped auto | Content-sized, capped at the given value. |
repeat(3, 1fr) | repetition | Shorthand for a repeated pattern. Also accepts a list: repeat(2, 100px 1fr). |
repeat(auto-fill, minmax(260px, 1fr)) | responsive, no media queries | Fits as many columns as will fit and keeps empty tracks in the grid. |
repeat(auto-fit, minmax(260px, 1fr)) | responsive, collapsing | Same, but collapses empty tracks so the existing items stretch to fill the row. |
subgrid | inherit parent tracks | Makes a nested grid adopt its parent's track sizes on that axis, so content in separate cards can line up across them. |
Frequently asked questions
How do I center a grid in CSS?
Use
justify-content: center on the grid container to centre the whole grid inside it, and margin-inline: auto with a max-width to centre the container in the page. These are different jobs: the first moves the tracks within the container, the second moves the container itself.How do I center items inside a CSS grid?
Set
place-items: center on the container. That is shorthand for align-items plus justify-items, and it centres every item inside its own cell on both axes. For a single item, use place-self: center on that item instead.How do I make a CSS grid responsive?
Use
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) and it reflows at every width with no media queries at all. Add breakpoints only when the exact column count matters, or when the layout has to change shape rather than just wrap.When should I use CSS Grid instead of Flexbox?
Use Grid when things must line up in two directions at once, and Flexbox when content flows along one axis. A page skeleton or dashboard is Grid; a navbar or row of buttons is Flexbox. They nest: Grid for the page, Flexbox inside the cells.
What is the fr unit in CSS Grid?
fr is a fraction of the space left over after fixed tracks and gaps are subtracted. In grid-template-columns: 200px 1fr 2fr, the 200px is taken out first, then the remainder splits three ways — one part to the second column, two to the third. It is not a percentage of the container.Why does my grid item overflow its column?
Because
1fr means minmax(auto, 1fr), and that auto minimum refuses to shrink below the content — a wide image or long unbroken string pushes the track open. Use minmax(0, 1fr) instead.What is the difference between grid-template-areas and grid-column?
Named areas describe the layout as a picture you can read; line numbers place items by coordinate. Areas are easier to rearrange but only work for non-overlapping rectangles with ident-safe names. This generator picks whichever applies and says which one it used.
Does CSS Grid break keyboard navigation?
It can, because Grid places items anywhere regardless of source order while keyboard focus and screen readers follow the DOM. If your visual order contradicts your HTML — especially if it changes between breakpoints — the tab sequence will jump around the page.