Stax

CSS Grid Cheat Sheet

Complete CSS Grid reference: container properties, item placement, grid-template-areas, fr/minmax/auto-fit, and Grid vs Flexbox decision guide.

Container properties (display: grid)

PropertyPurposeExample
grid-template-columnsDefine column tracks1fr 2fr 1fr
grid-template-rowsDefine row tracksauto 1fr auto
grid-template-areasName areas for placement"hd hd" "nav main" "ft ft"
gapSpace between tracks16px or 1rem 2rem
justify-itemsInline-axis alignment of items in cellsstart | center | end | stretch
align-itemsBlock-axis alignment of items in cellsstart | center | end | stretch
place-itemsShorthand for bothcenter
justify-contentPosition the entire grid horizontallyspace-between
align-contentPosition the entire grid verticallyspace-around
grid-auto-flowHow auto-placed items flowrow | column | dense
grid-auto-rowsDefault size for implicit rows200px or minmax(100px, auto)

Item properties

PropertyExampleEffect
grid-column1 / 3 or span 2Span column tracks 1 to 3 (exclusive)
grid-row2 / span 2Start at row 2, span 2 rows
grid-areaheaderPlace in named area
justify-selfendOverride container's justify-items for one item
align-selfcenterOverride container's align-items for one item
place-selfcenter endShorthand for align-self + justify-self

Track sizing units

Unit / functionMeansWhen to use
frFraction of remaining spaceFlexible columns/rows
autoSized by contentSidebar that fits its content
min-contentSmallest size content can shrink toAvoid overflow
max-contentLargest size content needsInline-block-like behaviour
minmax(min, max)Rangeminmax(200px, 1fr) — at least 200, otherwise flex
repeat(N, ...)Repeat tracks N timesrepeat(3, 1fr) = 1fr 1fr 1fr
repeat(auto-fit, ...)Fill, collapse emptyResponsive cards (single item stretches)
repeat(auto-fill, ...)Fill, keep emptyCalendar-style grids

Common patterns

Responsive card grid (no media queries)

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

Holy grail layout

.layout {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "sidebar main aside"
    "footer footer footer";
  min-height: 100vh;
}
header { grid-area: header; }
.sidebar { grid-area: sidebar; }
main { grid-area: main; }
aside { grid-area: aside; }
footer { grid-area: footer; }

12-column grid (Bootstrap-style)

.row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}
.col-6 { grid-column: span 6; }
.col-4 { grid-column: span 4; }
.col-3 { grid-column: span 3; }

Center anything

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

Sticky header + scrollable body

.app {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100vh;
}
header { /* row 1 - auto height */ }
main { overflow-y: auto; /* row 2 - fills remaining */ }

Grid vs Flexbox decision matrix

NeedChoose
2-D page layout (rows + cols)Grid
Navigation bar items in a rowFlexbox
Card grid that wraps responsivelyGrid (auto-fit minmax)
Buttons aligned right of a headerFlexbox (justify-content: space-between)
Mosaic / masonry-styleGrid (with grid-auto-flow: dense)
Equal-height columns of unknown countFlexbox
Calendar / spreadsheet-likeGrid
Chat message list (top-anchored)Flexbox (column-reverse)

Browser support & gotchas

  • All modern browsers (Chrome 57+, Safari 10.1+, Firefox 52+) — 97%+ global support since 2017.
  • IE11 has a partial older spec — needs -ms- prefix and explicit grid-row/column-end; usually not worth supporting in 2026.
  • gap works in Flexbox too since 2021 — Safari was the holdout.
  • subgrid (inheriting parent grid's tracks) is in all modern browsers since 2023 — use freely.
  • Grid items don't shrink below their min-content by default — use min-width: 0 or minmax(0, 1fr) if content overflows.

CSS Grid in one paragraph

CSS Grid is a 2-D layout system: you define rows and columns (the "tracks") on a parent (display: grid), and children become grid items that snap into those tracks. The killer feature is fractional units (fr) and minmax(), which let you build responsive layouts without media queries. Combined with grid-template-areas, you can sketch a layout in plain English and have it map to the DOM.

When Grid is the right tool

Use Grid for page-level layout (header / sidebar / main / footer), card galleries with mixed sizes, magazine-style layouts, and forms with aligned label columns. Use Flexbox inside Grid cells for the contents of those cells. The two are not competitors — they're complementary.

Frequently asked questions

When should I use CSS Grid vs Flexbox?
Grid is for two-dimensional layouts (rows AND columns simultaneously) — page layouts, dashboards, photo galleries with both fixed and fluid tracks. Flexbox is for one-dimensional layouts (items in a row OR a column) — navbars, button rows, centered content. Grid wins for the macro page structure; Flexbox wins for the micro component layout. Use both together: Grid for the page, Flexbox for components inside grid cells.
What does fr mean in grid-template-columns?
fr stands for 'fraction of remaining space'. grid-template-columns: 1fr 2fr means after fixed-size tracks are allocated, the remaining space is split — first column gets 1/3, second gets 2/3. fr is grid's killer feature: responsive without media queries. Use 1fr 1fr 1fr for three equal columns; auto 1fr for fixed-then-fill layouts (like navbar logo + flexible nav).
What's the difference between auto-fit and auto-fill?
Both create as many columns as fit. auto-fill keeps empty columns reserved (so a single item stays at minmax minimum width). auto-fit collapses empty columns (so a single item can stretch full width). For typical responsive card grids, auto-fit feels more natural. Pattern: grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)).
Why isn't my grid-template-areas working?
Three common bugs: (1) Areas must form a rectangle — 'header header' must repeat across all rows that area spans; (2) Each row must have the same number of columns; (3) Areas you reference in grid-area on items must exist in grid-template-areas. Use a dot (.) for empty cells. Always check your area names match exactly — typos are silent failures.
How do I center an item in a grid cell?
Three options depending on scope. Centre one item: place-self: center on that item. Centre all items: place-items: center on the container. Centre the entire content within the grid: place-content: center on the container. place-* is shorthand for align-* and justify-*. For Grid+Flex layouts, place-items: center is the modern 'center anything' incantation.

Related tools