Reusable CSS Grid layout patterns

Patterns, not a theory

The layout techniques article explains when Grid wins over Flexbox. This page is the copy-and-adapt set: three Grid patterns that cover most real layouts, plus the placement rules that stop them becoming fragile. All of them rely on the same foundation, declaring tracks first and placing items into them.

Pattern one: the page frame

The classic three-band page, header, main, footer, plus an optional sidebar:

.page {
  display: grid;
  grid-template-columns: 1fr 320px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "main   aside"
    "footer footer";
  gap: 1.5rem;
  min-height: 100vh;
}
.page > header { grid-area: header; }
.page > main   { grid-area: main; }
.page > aside  { grid-area: aside; }
.page > footer { grid-area: footer; }

grid-template-areas limits the article band to a readable measure while the sidebar takes its own column, and it makes the visual structure readable straight from the CSS. On narrow screens, swap the areas to stack them:

@media (max-width: 40rem) {
  .page { grid-template-columns: 1fr; grid-template-areas: "header" "main" "aside" "footer"; }
}

Pattern two: the responsive card grid

Cards that flow automatically and stay balanced at any width:

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}

auto-fill creates as many tracks as fit at that container width, and minmax(240px, 1fr) guarantees each track is at least 240px wide and stretches to share the leftover space. Add auto-fit instead of auto-fill when you want a single remaining card to stretch across the freed space rather than leave an empty track.

Pattern three: an explicit placement grid

When you want to place specific items on named cells regardless of source order:

.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.feature { grid-column: 1 / -1; }
.tile-a  { grid-column: span 2; }

grid-column: 1 / -1 spans the full width, span 2 takes two columns, and explicit placement lets you override source order deliberately. This pattern suits a dashboard or a featured-tile row where each item's position is part of the design.

The placement rules that keep patterns maintainable

• Prefer named tracks and areas over raw line numbers so a later column count does not break your 1 / 5 placed items.
• Declare the grid on the container, not the items. Items take part in their grid; most layout control belongs on the parent.
• Use fr for flexible tracks and pixel or minmax for fixed ones, and keep gutters in gap instead of margins so the box model does not fight you.
• Pair with custom properties for the key sizes, so the 320px sidebar or the 240px minimum become one named token updated in the custom properties theme rather than edited in every rule.

These three patterns plus correct placement cover a normal site's grid work. Add the responsive baseline and a media-query breakpoint for the small-screen stack, and the grid stays as maintainable as the layout model choice that picked it.