CSS Grid Cheat Sheet
Free CSS Grid cheat sheet: grid-template-columns, fr units, repeat(), minmax, named areas, item placement, alignment and responsive auto-fit patterns.
Turning it on
| Concept | Syntax | Example |
|---|---|---|
| display: grid Makes the container a grid. Children become grid items. | display: grid | .board { display: grid; } |
| Grid vs Flexbox Use grid when you control BOTH rows AND columns; flex for a single line. | grid = 2D, flex = 1D | Grid for whole-page layout; Flex for nav/card content |
Defining the tracks
| Concept | Syntax | Example |
|---|---|---|
| grid-template-columns Define column widths. fr units share remaining space. | grid-template-columns: 1fr 2fr 1fr | .grid { grid-template-columns: 1fr 1fr 1fr; } |
| grid-template-rows Define row heights. Mix fixed + auto + fr. | grid-template-rows: 100px auto 80px | grid-template-rows: 60px 1fr 40px; |
| repeat() 12-column grid in one line. | repeat(count, size) | grid-template-columns: repeat(12, 1fr); |
| minmax() Column is at least 200px and at most 1fr. | minmax(min, max) | minmax(200px, 1fr) |
| auto-fit vs auto-fill auto-fit stretches items to fill the row; auto-fill leaves empty tracks. | repeat(auto-fit, …) | repeat(auto-fit, minmax(250px, 1fr)) |
| gap Space between rows AND columns in one line. | gap: 1rem / row-gap / column-gap | .grid { gap: 16px; } |
Placing items by line
| Concept | Syntax | Example |
|---|---|---|
| grid-column Item spans from column line 1 to line 3 (= 2 columns wide). | grid-column: 1 / 3 | .hero { grid-column: 1 / 4; } |
| grid-row Item spans from row line 2 to line 4. | grid-row: 2 / 4 | .sidebar { grid-row: 1 / 3; } |
| span keyword Span N tracks from wherever auto-placement put us. Easier than counting lines. | grid-column: span 2 | grid-column: span 3; |
| Negative line numbers -1 = last line. Perfect for full-width rows. | grid-column: 1 / -1 | .banner { grid-column: 1 / -1; } |
Named areas (visual layout)
| Concept | Syntax | Example |
|---|---|---|
| grid-template-areas Draw your layout with strings. Visual + powerful. | grid-template-areas: "a b" "c c" | grid-template-areas: 'header header' 'nav main' 'footer footer'; |
| grid-area Assign an item to a named area defined above. | grid-area: name | header { grid-area: header; } |
| Empty cells Dot = leave that cell empty. | use . for empty | 'header header' '. main' |
Alignment
| Concept | Syntax | Example |
|---|---|---|
| justify-items (column axis) Align all items HORIZONTALLY within their cells. | start | end | center | stretch | justify-items: center; |
| align-items (row axis) Align all items VERTICALLY within their cells. | start | end | center | stretch | align-items: center; |
| place-items (shorthand) Both axes in one line — perfect centering. | place-items: center center | place-items: center; |
| justify-self / align-self Override the container's alignment for just one item. | on individual items | .pinned { align-self: end; } |
Responsive patterns
| Concept | Syntax | Example |
|---|---|---|
| Auto-responsive card grid Cards wrap automatically with no media queries. The killer Grid pattern. | repeat(auto-fit, minmax(250px, 1fr)) | grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); |
| Holy grail layout Classic 3-column layout that collapses on mobile. | named areas + media queries | Header / nav / main / aside / footer using grid-template-areas |
| Dense packing Fills gaps left by oddly-sized items. Like Tetris auto-pack. | grid-auto-flow: dense | .gallery { grid-auto-flow: dense; } |
| Subgrid Modern. Children align to the parent's grid lines. | grid-template-columns: subgrid | .card { display: grid; grid-template-columns: subgrid; } |