CSS Grid Advanced Patterns: Build Any Layout With Grid Template Areas

CSS Grid’s template areas feature lets you describe your layout in ASCII art — and it actually works beautifully in production. Combined with minmax(), auto-fill, and auto-fit, you can build fully responsive layouts that need zero media queries. This guide covers the advanced patterns that separate CSS Grid beginners from experts.

⚡ TL;DR: grid-template-areas for named layout zones. minmax() for flexible track sizing. auto-fill creates as many tracks as fit. auto-fit collapses empty tracks. subgrid inherits parent grid lines. repeat(auto-fill, minmax(250px,1fr)) is the responsive grid magic spell.

Template areas — ASCII art layouts

.layout {
  display: grid;
  grid-template-areas:
    "header  header  header"
    "sidebar main    main  "
    "sidebar footer  footer";
  grid-template-columns: 250px 1fr 1fr;
  grid-template-rows: 60px 1fr 50px;
  min-height: 100vh;
}
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }
/* Responsive: just redefine areas in media query */
@media (max-width: 768px) {
  .layout {
    grid-template-areas:
      "header"
      "main"
      "sidebar"
      "footer";
    grid-template-columns: 1fr;
  }
}

Responsive grid without media queries

/* auto-fill: creates as many tracks as fit at min-width */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 24px;
}
/* At 800px wide: 3 cards. At 500px wide: 2 cards. At 300px: 1 card */
/* Zero media queries needed! */

/* auto-fit vs auto-fill: */
/* auto-fill: empty tracks remain (keeps columns even if fewer items) */
/* auto-fit: collapses empty tracks (items stretch to fill) */
.stretch-grid {
  grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
}

minmax and named lines

/* minmax(min, max): track is at least min, at most max */
.layout {
  grid-template-columns:
    [sidebar-start] 250px [sidebar-end main-start] 1fr [main-end];
  grid-template-rows:
    [header-start] 60px [header-end] 1fr [footer-start] 50px [footer-end];
}
/* Place by name */
.content {
  grid-column: main-start / main-end;
  grid-row: header-end / footer-start;
}

Subgrid — inherit parent tracks

/* Parent defines grid, children align to it */
.parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.card {
  /* Card spans all 3 columns */
  grid-column: 1 / -1;
  display: grid;
  /* Inherit parent's column tracks */
  grid-template-columns: subgrid;
}
/* Now card's children align to parent grid! */

• ✅ grid-template-areas for readable named layouts
• ✅ repeat(auto-fill, minmax(min,1fr)) for zero-query responsive grids
• ✅ auto-fit collapses empty tracks — auto-fill keeps them
• ✅ Named lines for semantic placement
• ✅ subgrid to inherit parent grid alignment
• ❌ Grid and Flexbox complement each other — use both

External reference: CSS-Tricks Complete Grid Guide.