CSS Grid Examples — 35 Layout Patterns with Code

CSS Grid is a two-dimensional layout system. You define a grid container with display: grid, then control both rows and columns with grid-template-columns and grid-template-rows. Items are placed automatically or explicitly into cells using line numbers, named areas, or span values.

Flexbox is one-dimensional — it arranges items along a single row or column. CSS Grid is two-dimensional — it controls rows and columns simultaneously. Use Flexbox for component internals (navigation, button groups, card layouts). Use Grid for page-level layout or any layout requiring precise two-axis alignment.

Use auto-fill or auto-fit with minmax(): grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); This creates as many columns as fit, each at least 250px wide. No media queries needed — the grid collapses to fewer columns as the viewport narrows.

fr stands for "fraction unit" — a share of the remaining free space. grid-template-columns: 1fr 2fr creates two columns where the second is twice as wide. Unlike percentages, fr automatically accounts for gap spacing, so columns never overflow their container.

Use grid-column: span N to span N columns: .featured { grid-column: span 2; } For rows: grid-row: span 2. Or use explicit line numbers: grid-column: 1 / 4 stretches from column line 1 to line 4 (spanning 3 columns).