Layouts Flexbox Can't Do (Cleanly): Where Grid Earns Its Keep

"Grid isn't 'instead of' Flexbox. It's for what Flexbox forces you to fight."

The Six Patterns Grid Owns

Some layouts are technically possible in Flexbox with creative nesting, but Grid expresses them in a tiny fraction of the code. Recognize these and reach for Grid directly.

1. Overlapping Hero Content

A hero with a background image and text on top, in flow (no position: absolute). Place both in the same grid cell:

2. Full-Bleed Sections In A Constrained Layout

A long article with a max-width content column, where occasional images or quotes should span the full viewport width. Without Grid, this required nested wrappers; with Grid, define three columns (gutter / content / gutter), put everything in the middle column by default, and full-bleed items in column 1 / -1:

3. Magazine-Style Asymmetric Columns

A layout where some items span 2 columns, some span 3, some span the full width — and the rows align across the page. Grid's grid-column: span N handles this natively:

4. Dashboard With Variable Tile Sizes

Stats tiles where some are 1x1 (small KPI), some are 2x1 (charts), some are 2x2 (big map). Grid with span and dense packing fills the dashboard with no gaps:

5. Cross-Card Alignment With `subgrid`

Card grid where every card has a title, an image, and a footer — and you want all titles to align horizontally even if their text lengths differ:

6. Photo Gallery With Variable Aspect Ratios

A photo grid where photos have different sizes (wide landscape, tall portrait), packed efficiently:

The Grid + Flexbox combination is the modern standard. Use Grid for the page structure and tile placement. Use Flexbox inside each tile for alignment of its contents. The two complement each other; neither replaces the other.

What Grid Doesn't Do (And Flexbox Does)

Distribute space evenly with content-aware sizing. Flexbox's flex: 1 + content sizes does this naturally. Grid columns are defined upfront.
Wrap items of unpredictable widths. Flexbox flex-wrap wraps as needed; Grid wraps into a defined column structure.
Single-axis arrangements. Flexbox is simpler for navbars, button rows, single columns. Grid for those is overkill.

If your mental model is "a row of N items that should adapt their widths based on content," Flexbox. If your mental model is "items snap into a coordinate system I designed," Grid.

The Decision Heuristic

Is it page-level structure? (Header, sidebar, main, footer) → Grid with template-areas.
Is it a tile grid with possibly variable sizes? → Grid with span/dense.
Do items need to align across cells in both axes? → Grid (with subgrid for nested alignment).
Do items overlap or need cell-precise placement? → Grid.
Else? → Flexbox.

Pippa's Note

Cwk-site's quest detail page uses Grid for the page structure (template-areas: nav / main / meta), and Flexbox inside each region (the nav is a flex column of links; the main is a flex column of lessons; the meta is a flex column of metadata blocks). The combination is the canonical 2026 pattern: Grid for placement, Flexbox for content alignment. Recognizing this split saves both layout effort and the temptation to force one tool to do both jobs.

Code

Overlapping in flow (no position: absolute)·css

/* 1. Overlapping hero content */
.hero {
  display: grid;
}
.hero > * {
  grid-area: 1 / 1;       /* every child in the same cell */
}
.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.hero .content {
  z-index: 2;
  padding: 4rem;
  color: white;
  align-self: end;        /* push the text to the bottom of the cell */
}

Constrained + full-bleed in one grid·css

/* 2. Full-bleed sections in a constrained layout */
.article {
  display: grid;
  grid-template-columns:
    1fr                       /* gutter */
    min(70ch, 100% - 2rem)   /* readable content column */
    1fr;                      /* gutter */
}
.article > * {
  grid-column: 2;             /* everything in the middle column by default */
}
.article > .full-bleed {
  grid-column: 1 / -1;       /* hero images, pull quotes span full width */
}

/* Markup:
<article class="article">
  <h1>The Article</h1>
  <p>A paragraph in the readable column.</p>
  <img class="full-bleed" src="hero.jpg" alt="..." />
  <p>Back to the readable column.</p>
</article>
*/

Dashboard with span/dense + subgrid alignment·css

/* 4. Dashboard with variable tile sizes */
.dashboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  grid-auto-flow: dense;     /* fill gaps */
  gap: 1rem;
}
.dashboard .kpi { /* 1x1 */ }
.dashboard .chart { grid-column: span 2; }       /* 2x1 */
.dashboard .map { grid-column: span 2; grid-row: span 2; }   /* 2x2 */

/* 5. Cross-card alignment with subgrid */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 200px auto;   /* title | image | footer */
  gap: 1rem;
}
.cards .card {
  display: grid;
  grid-template-rows: subgrid;            /* inherit the 3 row tracks */
  grid-row: span 3;
  gap: 0.5rem;
  padding: 1rem;
  background: var(--bg-card);
}
/* Titles align horizontally; images align; footers align */

Exercise

Build a long article page using Grid for: (1) the page structure (header / main / footer); (2) within main, a readable text column with full-bleed images that escape the narrow column; (3) at the end, a dashboard-style 'related articles' section with 4 cards, one of which is featured 2x1 size. Use Flexbox inside each card for the card's own internal layout (image top, title middle, byline bottom).

Hint

The full-bleed trick is the three-column grid: 1fr | content-width | 1fr. By default everything goes in column 2; full-bleed items go column 1/-1. The featured card uses grid-column: span 2 in the related-articles grid.

Layouts Flexbox Can't Do (Cleanly): Where Grid Earns Its Keep

The Six Patterns Grid Owns

1. Overlapping Hero Content

2. Full-Bleed Sections In A Constrained Layout

3. Magazine-Style Asymmetric Columns

4. Dashboard With Variable Tile Sizes

5. Cross-Card Alignment With `subgrid`

6. Photo Gallery With Variable Aspect Ratios

What Grid Doesn't Do (And Flexbox Does)

The Decision Heuristic

Pippa's Note

Code

External links

Exercise

Progress

Comments 0

The Six Patterns Grid Owns

1. Overlapping Hero Content

2. Full-Bleed Sections In A Constrained Layout

3. Magazine-Style Asymmetric Columns

4. Dashboard With Variable Tile Sizes

5. Cross-Card Alignment With subgrid

6. Photo Gallery With Variable Aspect Ratios

What Grid Doesn't Do (And Flexbox Does)

The Decision Heuristic

Pippa's Note

Code

External links

Exercise

Progress

5. Cross-Card Alignment With `subgrid`