CSS Grid: Common Layout Patterns

Once you know the building blocks of CSS Grid — tracks, fr units, and named areas — the fastest way to get comfortable with it is seeing it solve real layout problems. Here are three patterns you'll reuse constantly.

Pattern 1: Responsive Card Gallery

<div class="cards">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
</div>

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

This produces an evenly spaced grid of cards that automatically reflows its column count as the screen shrinks — covered in full detail in responsive grids without media queries.

Pattern 2: Holy Grail Layout

The "holy grail" layout — header, footer, a main content area, and two side columns — was notoriously fiddly before Grid. With named areas it becomes a direct translation of the layout diagram into CSS.

.layout {
  display: grid;
  grid-template-columns: 180px 1fr 180px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "nav    main   aside"
    "footer footer footer";
  min-height: 100vh;
  gap: 1rem;
}

.header { grid-area: header; }
.nav    { grid-area: nav; }
.main   { grid-area: main; }
.aside  { grid-area: aside; }
.footer { grid-area: footer; }

This renders a full-height page: a header and footer that span the full width, and three columns in between — a fixed-width nav on the left, flexible main content in the middle, and a fixed-width aside on the right. See grid template areas for a closer look at this technique on its own.

Pattern 3: Image Gallery with Varying Sizes

Grid items don't have to be uniform — a single item can be told to span multiple columns or rows, which is how Pinterest-style or "featured item" galleries are built.

<div class="gallery">
  <div class="item featured">Featured</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 120px;
  gap: 0.75rem;
}

.featured {
  grid-column: span 2;
  grid-row: span 2;
}

The .featured item takes up a 2×2 block while the rest of the images fill in around it as single 1×1 cells — the browser handles the rest of the packing automatically.

These three patterns cover the large majority of real-world grid layouts. Once they feel natural, combining them (for example, a holy-grail layout whose main area is itself a responsive card grid) is just a matter of nesting one grid container inside another.

---