CSS Grid Layout
CSS Grid Layout — Complete guide to CSS Grid for two-dimensional layouts: grid containers, tracks, areas, and responsive patterns. The guide walks through Grid Container, Grid Items, Position Types, Positioning Properties. `display:grid` — enables grid. `grid-template-columns: 1fr 1fr 1fr` — 3 equal columns. `grid-template-rows: auto 1fr auto` — header, content, footer. `gap: 20px` — spacing. `grid-template-areas: "header header" "sidebar content" "footer footer"` — named areas. `auto-fill` / `auto-fit` — responsive columns without media queries. `grid-column: 1 / 3` — span from line 1 to 3. `grid-column: span 2` — span 2 columns. `grid-row: 1 / 3` — span rows. `grid-area: header` — place in named area. `justify-self: center` — horizontal alignment per item. `align-self: stretch` — vertical alignment. Place items with: `grid-column-start`, `grid-column-end`, `grid-row-start`, `grid-row-end`. The guide is organized into 4 sections that build on each other, each pairing a prose explanation with real CSS you can use as-is. Related guides: CSS Introduction, CSS Selectors, CSS Box Model, CSS Flexbox, CSS Grid.