Every common CSS grid property, grouped by where it applies: the container, the item, and the sizing units. Each row pairs the property with its common values.
Grid lays elements out in two dimensions: rows and columns at once. Set display: grid on the parent, define tracks with grid-template-columns and grid-template-rows, and place children into cells. Use grid for page and card layouts; use flexbox for one-dimensional bars. The two compose freely.
Reference table · 33 entries
CSS GridExplained
33 of 33 rows
Container
grid | inline-grid
Turn the element into a grid container.
1fr 1fr | repeat(3, 1fr) | 200px 1fr
Define the columns and their widths.
auto 1fr auto
Define the rows and their heights.
[main-start] 1fr [main-end]
Name grid lines in a template and place items by those names.
1rem | 8px 16px
Space between rows and columns.
"header header" "nav main"
Name cells for readable placement.
"head head" 64px "nav main" 1fr / 200px 1fr
Set rows, columns, and areas in one shorthand.
repeat(2, 1fr) / auto-flow 80px
Set every track property and grid-auto-flow in one declaration.
minmax(80px, auto)
Set the height of rows the template does not define.
120px | minmax(0, 1fr)
Set the width of columns the template does not define.
row | column | row dense
Pick the axis for unplaced items; dense backfills earlier gaps.
start | center | end | stretch
Align each item inside its cell along the row axis.
start | center | end | stretch
Align each item inside its cell along the column axis.
center | start end
Set align-items and justify-items in one declaration.
start | center | space-between
Align the track grid inside the container along the row axis.
start | center | space-between
Align the track grid inside the container along the column axis.
center | end start
Set align-content and justify-content in one declaration.
Item
1 / 3 | span 2
Place or span an item across columns.
1 / 2 | span 3
Place or span an item across rows.
grid-column: 2 / -1
Count lines from the end of the grid; -1 is the last line.
header | 1 / 1 / 2 / 3
Name or fully place an item in one shorthand.
start | center | end | stretch
Align this one item inside its cell along the row axis.
start | center | end | stretch
Align this one item inside its cell along the column axis.
center | start end
Set align-self and justify-self in one declaration.
Sizing units
1fr | 2fr
A fraction of the free space in the track.
auto | 1fr auto
Size a track by its content; alignment can stretch it.
min-content | max-content
Size a track to its smallest or its largest content.
fit-content(180px)
Size a track by its content but never past the given cap.
minmax(200px, 1fr)
Bound a track between a min and a max.
repeat(4, 1fr)
Repeat a track pattern without typing each one.
repeat(auto-fit, minmax(120px, 1fr))
Add as many tracks as fit; auto-fit collapses empty ones.
grid-template-columns: subgrid
Make a nested grid share the parent's tracks and line names.
grid-template-rows: masonry
Experimental: pack items into columns by height instead of fixed rows.