Grid beyond the basics

Past the basics: Grid basics: named grid areas, implicit tracks, auto-fit vs auto-fill, and subgrid for aligning nested content with the parent grid. The intro series got you started with columns and gaps; here we build layouts you will recognise from dashboards and marketing pages.

Named grid areas

Instead of placing every item by line number, describe the layout as a ASCII map with area names:

.site-shell {
  display: grid;
  min-height: 100dvh;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  gap: 0;
}

.site-header { grid-area: header; }
.site-sidebar { grid-area: sidebar; }
.site-main { grid-area: main; }
.site-footer { grid-area: footer; }

At a narrow width, swap the template:

@media (max-width: 48rem) {
  .site-shell {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main"
      "sidebar"
      "footer";
  }
}

Named areas read like the wireframe. New team members see ‘header, sidebar, main’ instead of deciphering line numbers.

auto-fit and auto-fill

Responsive card grids without media queries often use repeat(auto-fit, minmax(...)):

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

auto-fit collapses empty tracks so leftover space stretches existing columns. auto-fill keeps empty tracks, which can leave gaps when you want a fixed column count feel. The min(100%, 18rem) trick avoids overflow on very narrow viewports.

Implicit vs explicit tracks

Explicit tracks come from grid-template-columns and grid-template-rows. Extra items flow into implicit tracks. Control them with:

.masonry-ish {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(120px, auto);
  grid-auto-flow: dense;
  gap: 1rem;
}

.masonry-ish .wide {
  grid-column: span 2;
}

.masonry-ish .tall {
  grid-row: span 2;
}

grid-auto-flow: dense backfills holes when items span multiple cells. Useful for bento-style layouts; test reading order for accessibility when items reorder visually.

Subgrid

Subgrid lets a nested grid inherit track lines from its parent, so card innards align across a row:

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3; /* title, body, footer rows */
  gap: 0.75rem;
}

.card__title { /* sits on row 1 of parent alignment */ }
.card__body { /* row 2 */ }
.card__footer { /* row 3 */ }

Without subgrid, cards in the same row often have misaligned footers because body text length varies. Subgrid is the fix when the parent defines the row structure and children participate.

Support is good in modern browsers. If subgrid is unavailable, flex column with margin-block-start: auto on the footer is a fallback that pushes footers down within each card, though cross-card alignment may still differ.

minmax() and fr units together

Sidebar layouts often need a fixed minimum sidebar and a flexible main column:

.with-sidebar {
  display: grid;
  grid-template-columns:
    minmax(16rem, 280px)
    minmax(0, 1fr);
  gap: 2rem;
}

The minmax(0, 1fr) on the main column prevents grid blowout when content has long unbreakable strings or wide pre blocks. A common gotcha worth remembering.

Grid vs Flexbox (again, briefly)

Grid is two-dimensional: rows and columns at once. Flexbox is one-dimensional: a row or a column. Page shells and card grids usually suit Grid; toolbars, tag lists, and vertically centred rows often suit Flexbox. Many layouts use both: Grid for the page, Flex inside a cell.

Debugging grid in DevTools

Firefox and Chrome DevTools overlay grid lines, area names, and track sizes. Toggle them when a layout looks wrong – often the issue is an item spanning unexpected lines or an implicit row with zero height. We cover DevTools workflows properly in a later tutorial.

The next tutorial is Flexbox gotchas and debugging – shrink behaviour, alignment surprises, and the gaps people stare at for an hour.