Web Development · Cheatsheet
CSS Grid Cheatsheet
Grid container and item properties, template areas, auto-placement, and responsive grids
36 commands 7 sections
No entry matches that filter.
-
display: gridEnable grid layout on container -
display: inline-gridInline-level grid container -
grid-template-columns: 1fr 2fr 1frDefine column sizes (fractional) -
grid-template-columns: repeat(3, 1fr)Repeat: 3 equal columns -
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))Responsive auto-fill columns -
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))Auto-fit (stretch to fill) -
grid-template-rows: 100px auto 1frDefine row sizes -
grid-auto-rows: minmax(100px, auto)Default height for implicit rows
-
grid-template-areas: "header header" "sidebar main" "footer footer"Define named areas -
grid-area: headerPlace item in named area -
grid-area: . (dot)Empty cell in template
-
gap: 16pxEqual row and column gap -
gap: 16px 24pxRow gap, column gap -
justify-items: start | center | end | stretchAlign items along row axis -
align-items: start | center | end | stretchAlign items along column axis -
place-items: centerShorthand for align-items + justify-items -
justify-content: center | space-betweenAlign grid within container (row) -
align-content: center | space-betweenAlign grid within container (column)
-
grid-column: 1 / 3Span from column line 1 to 3 -
grid-column: 1 / -1Span full width -
grid-column: span 2Span 2 columns from auto position -
grid-row: 1 / 3Span from row line 1 to 3 -
grid-row: span 2Span 2 rows -
grid-area: 1 / 1 / 3 / 3Shorthand: row-start / col-start / row-end / col-end
-
justify-self: start | center | end | stretchAlign item along row axis -
align-self: start | center | end | stretchAlign item along column axis -
place-self: centerShorthand for align-self + justify-self -
order: -1Change visual order -
z-index: 1Stack order for overlapping items
-
1frOne fraction of available space -
minmax(200px, 1fr)Min 200px, max 1fr -
min-contentSize to minimum content width -
max-contentSize to maximum content width -
fit-content(300px)Like max-content but capped at 300px -
autoSize based on content and available space
-
https://www.w3.org/TR/css-grid-2/W3C Grid specification: tracks, areas, placement, and alignment.