CSS Grid Cheatsheet
Grid = 2-D layout. Rows and columns. Fractional units + auto-flow give most layouts for free.
1 credit
Container
7 itemsEnable
display: grid / inline-gridDefine columns
grid-template-columns: 200px 1fr 1frRepeat
grid-template-columns: repeat(3, 1fr)Auto-fit responsive
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))Rows
grid-template-rows: auto 1fr autoGaps
gap: 1rem row-gap: 1rem column-gap: 1remNamed areas
grid-template-areas: "hd hd" "sb mn" "ft ft"Item placement
4 itemsSpan cells
grid-column: span 2 (spans 2 columns)Explicit start/end
grid-column: 2 / 4 / grid-row: 1 / -1Named area
grid-area: headerPer-item align
justify-self / align-self: start | center | end | stretchPatterns
css
/* Holy grail */
body {
display: grid;
grid-template: "hd hd hd" auto
"sb mn ad" 1fr
"ft ft ft" auto / 200px 1fr 200px;
min-height: 100dvh;
}
/* Responsive card grid */
.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }