CSS Grid
Updated 2026-02-14
CSS Grid layout: grid container and item properties. Rows, columns, areas, gap, and alignment.
Container
display: grid; grid-template-columns: 1fr 1fr 1fr | repeat(3, 1fr) | 200px 1fr auto; grid-template-rows: auto 1fr; gap: 1rem (or row-gap, column-gap). grid-auto-rows: minmax(100px, auto);
Placement and areas
grid-column: 1 / -1 (span full); grid-row: 1 / 2. grid-area: name (with template-areas). justify-items, align-items (start | center | end | stretch). justify-content, align-content for the grid. place-items, place-content shorthand.
Item properties
grid-column-start, grid-column-end, grid-row-start, grid-row-end. span n to span n tracks. grid-area: row-start / col-start / row-end / col-end.
Common patterns
12-column: grid-template-columns: repeat(12, 1fr); then col-span-4 via grid-column. Auto-fit: repeat(auto-fit, minmax(200px, 1fr)). Named lines: grid-template-columns: [start] 1fr [mid] 1fr [end]; use grid-column: start / end.