Mastering CSS Grid and Subgrid

Flexbox distributes items along one axis. Grid positions them on two axes at once. Reaching for the wrong one is why so many layouts end up held together by fixed heights and negative margins.

The template syntax lets the CSS describe the page shape directly, and rearranging it for a breakpoint means redrawing the picture rather than rewriting every child rule.

```css
.page {
  display: grid;
  grid-template-areas:
    'header header'
    'sidebar main'
    'footer footer';
  grid-template-columns: minmax(12rem, 20rem) 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100dvh;
  gap: 1.5rem;
}

.page > header { grid-area: header; } .page > aside { grid-area: sidebar; } .page > main { grid-area: main; }

@media (width < 48rem) { .page { grid-template-areas: 'header' 'main' 'sidebar' 'footer'; grid-template-columns: 1fr; } } ```

One of the most useful lines in modern CSS handles an entire card grid across every viewport width:

```css
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: 1rem;
}

auto-fit collapses empty tracks, minmax sets the comfortable minimum, and the inner min() prevents overflow on narrow screens. No breakpoints required.

Before subgrid, a row of cards could not align internally. Each card was its own formatting context, so a two-line title in one card pushed its body and footer out of step with its neighbours. The old workarounds were fixed heights, line clamping, or JavaScript measurement.

```css
.cards { display: grid; grid-template-rows: auto 1fr auto; }

.card { display: grid; grid-row: span 3; grid-template-rows: subgrid; /* inherits the parent's three rows */ } ```

Now every title occupies the same row track, every body the same, every footer the same. Titles, bodies, and buttons line up across the whole row regardless of content length, with no magic numbers anywhere.

• 1fr means minimum content size, not zero. A long unbroken string will blow out the track. Use minmax(0, 1fr) when overflow matters.
• Grid gives you real ordering control. grid-row: 1 and order can rearrange visually, but the DOM order still drives keyboard and screen reader navigation. Keep them aligned.
• Subgrid inherits tracks, not gaps automatically. Verify spacing when nesting.
• align-content and justify-content move the entire grid inside its container. align-items and justify-items move contents within cells. Mixing these up causes most mystery centering bugs.

Grid handles the page skeleton; container queries let individual components respond to the space they were given rather than to the viewport. Together they replace most of what layout libraries used to do, with less code and better performance.