Reference
CSS Grid — Quick Reference

CSS Grid Cheatsheet

All container and item properties, the line-number system, fr unit, repeat() + minmax(), and copy-paste patterns for common layouts. Print this out.

The One Rule

Flexbox = one dimension (row OR column). Grid = two dimensions (rows AND columns). Use Grid for page layouts and anything that needs neat rows + columns. Use Flexbox inside individual components.

Container Properties

Set these on the element with display: grid.

grid-template-columns

  • 1fr 1fr 1fr — 3 equal columns
  • 200px 1fr — fixed + flexible
  • 1fr 2fr 1fr — weighted columns
  • repeat(4, 1fr) — 4 equal columns
  • repeat(auto-fill, minmax(250px, 1fr)) — responsive

grid-template-rows

  • auto — height from content (default)
  • 100px 200px — explicit row heights
  • 1fr 2fr — proportional rows
  • auto 1fr auto — header/body/footer
  • repeat(3, 100px) — 3 equal rows

gap

  • 16px — equal row and column gaps
  • 24px 16px — row-gap column-gap
  • row-gap: 24px — longhand for rows
  • column-gap: 16px — longhand for cols

Alignment (Container)

  • justify-items — horizontal alignment of all items in cells
  • align-items — vertical alignment of all items in cells
  • justify-content — horizontal alignment of the grid itself
  • align-content — vertical alignment of the grid itself
  • place-items: center — shorthand for both item alignments
  • Values: start end center stretch

Item Properties

Set these on individual grid items (children of the grid container).

grid-column

  • 1 / 3 — from line 1 to line 3 (2 columns)
  • 1 / -1 — span the entire row
  • span 2 — take up 2 columns from current position
  • 2 / span 3 — start at line 2, span 3 cols

grid-row

  • 1 / 3 — from line 1 to line 3 (2 rows)
  • span 2 — take up 2 rows
  • 1 / -1 — span all explicit rows

Alignment (Item)

  • justify-self — override horizontal alignment for this item
  • align-self — override vertical alignment for this item
  • place-self: center — center this item in its cell

Grid Line Numbers

  • Lines start at 1, not 0
  • 3 columns → 4 column lines (1, 2, 3, 4)
  • -1 = last line, -2 = second to last
  • Lines are between tracks (like fence posts)

Key Functions

repeat(count, size)

  • repeat(3, 1fr) = 1fr 1fr 1fr
  • repeat(auto-fill, ...) — as many as fit
  • repeat(auto-fit, ...) — as many as fit, collapse empties

minmax(min, max)

  • minmax(200px, 1fr) — at least 200px, can grow
  • minmax(0, 1fr) — can shrink to 0
  • Usually combined with repeat(auto-fill, ...)

Copy-Paste Patterns

1. Responsive Card Grid

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }

2. Holy Grail Layout

.page { display: grid; grid-template-columns: 250px 1fr; grid-template-rows: auto 1fr auto; min-height: 100vh; } .header { grid-column: 1 / -1; } .footer { grid-column: 1 / -1; }

3. Dashboard with Spanning Widgets

.dashboard { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .widget-wide { grid-column: span 2; } .widget-tall { grid-row: span 2; } .widget-full { grid-column: 1 / -1; }

4. Centered Content (simplest centering in CSS)

.center-me { display: grid; place-items: center; min-height: 100vh; }

5. Fixed Sidebar + Fluid Content

.layout { display: grid; grid-template-columns: 300px 1fr; gap: 24px; }

Grid vs Flexbox Decision Table

ScenarioUse
Navigation barFlexbox
Page layout (header/sidebar/main/footer)Grid
Card grid / galleryGrid
Button group in a rowFlexbox
Dashboard with spanning widgetsGrid
Centering a single thingEither
Components inside a grid cellFlexbox

Canonical references: CSS-Tricks: A Complete Guide to CSS Grid • MDN: CSS Grid Layout