CSS Grid Cheat Sheet
Quick reference for CSS Grid Layout. Grid container and item properties, template areas, alignment, auto-fit/fill, and responsive grid patterns.
Grid Container
repeat() & auto-fit/fill
Grid Template Areas
Grid Item Placement
Alignment (Container)
Alignment (Items)
Common Patterns
Grid Container
| display: grid | Enable grid layout on container |
| display: inline-grid | Inline-level grid container |
| grid-template-columns: 1fr 1fr 1fr | 3 equal columns |
| grid-template-columns: 200px 1fr 2fr | Fixed + flexible columns |
| grid-template-rows: 100px auto 1fr | Row sizing |
| grid-template: rows / columns | Shorthand for rows and columns |
| gap: 16px | Gap between rows and columns |
| row-gap: 16px | Gap between rows only |
| column-gap: 16px | Gap between columns only |
repeat() & auto-fit/fill
| repeat(3, 1fr) | Repeat 3 times: 1fr 1fr 1fr |
| repeat(auto-fill, minmax(200px, 1fr)) | As many 200px+ columns as fit (empty tracks kept) |
| repeat(auto-fit, minmax(200px, 1fr)) | As many 200px+ columns as fit (empty tracks collapsed) |
| minmax(100px, 300px) | Column min 100px, max 300px |
| repeat(3, minmax(0, 1fr)) | Equal columns that can shrink to 0 |
Grid Template Areas
| grid-template-areas: "header header" "sidebar main" "footer footer" |
Define named grid areas |
| grid-area: header | Place item in named area |
| grid-area: . (dot) | Empty cell in template |
Grid Item Placement
| grid-column: 1 / 3 | Span from column line 1 to 3 |
| grid-column: 1 / -1 | Span full width (first to last line) |
| grid-column: span 2 | Span 2 columns from auto position |
| grid-row: 1 / 3 | Span from row line 1 to 3 |
| grid-row: span 2 | Span 2 rows |
| grid-area: 1 / 1 / 3 / 3 | Shorthand: row-start / col-start / row-end / col-end |
Alignment (Container)
| justify-items: start | center | end | stretch | Align items horizontally within cells |
| align-items: start | center | end | stretch | Align items vertically within cells |
| place-items: center | Shorthand: align-items + justify-items |
| justify-content: center | space-between | Align grid within container (horizontal) |
| align-content: center | space-between | Align grid within container (vertical) |
| place-content: center | Shorthand: align-content + justify-content |
Alignment (Items)
| justify-self: start | center | end | Override horizontal alignment for one item |
| align-self: start | center | end | Override vertical alignment for one item |
| place-self: center | Shorthand: align-self + justify-self |
Common Patterns
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) | Responsive card grid (no media queries) |
| grid-template-columns: 250px 1fr | Sidebar + main layout |
| grid-template-rows: auto 1fr auto | Header + content + footer (sticky footer) |
| grid-template-columns: repeat(12, 1fr) | 12-column grid system |
| grid-auto-rows: minmax(100px, auto) | Implicit rows with minimum height |
| grid-auto-flow: dense | Fill in gaps with smaller items (masonry-like) |
Try It Live
Test these patterns with our free CSS Grid Generator. No signup needed.
Open CSS Grid Generator →
Step-by-Step Guide
Read Guide →