CSS Grid
CSS Grid Layout — a two-dimensional layout system for arranging content in rows and columns. The most powerful CSS layout tool for full-page layouts, dashboards, and magazine-style designs. Grid handles both rows and columns simultaneously, unlike Flexbox.
- Full-page layouts.
- Dashboards and 2D grids.
- Magazine/asymmetric layouts.
- Simple 1D rows/columns (Flexbox is simpler).
- Flowing text content.
Definition
CSS Grid divides a container into rows and columns (grid-template-rows/columns). Items are placed into grid cells using line numbers, areas, or spans. Grid handles gaps, alignment, and responsive reflow with auto-fit/auto-fill.
Why it exists
Flexbox is 1D; full-page layouts need 2D control over both rows and columns. Grid provides that with named areas, explicit tracks, and responsive auto-flow.
How it works
Define grid-template-columns/rows with sizes (fr, px, auto, minmax). Place items with grid-column/row or grid-area. Use auto-fit with minmax for responsive grids that reflow without media queries. gap controls spacing.
Scaling limits
Browser support is universal now but older IE had a different syntax. Subgrid support is still incomplete in some browsers.
Cost shape
Free, built into CSS.
Alternatives
- Flexbox — Simpler 1D layout, but no 2D control.
- Tailwind grid utilities — Same Grid via utility classes.
Failure modes
- Confusing auto-fit vs auto-fill.
- Implicit rows creating unexpected tracks.
- Subgrid not supported everywhere.