CSS Grid Advanced Patterns

Grid Gets Powerful When You Stop Counting Lines

Grid fundamentals are about numbers -- line 1 to line 3, span 2. But advanced Grid? It's about names, nesting, and overlapping. Named areas make layouts readable as a visual map. Subgrid solves the nested alignment problem that used to require JavaScript. And overlapping items eliminate absolute positioning hacks entirely.

Named Grid Areas

.layout {
  display: grid;
  grid-template-areas:
    "header  header  header"
    "sidebar content aside"
    "footer  footer  footer";
  grid-template-columns: 250px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  min-height: 100dvh;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.aside   { grid-area: aside; }
.footer  { grid-area: footer; }

The grid-template-areas property is a visual map of the layout. Each string is a row. Each word is a column cell. Same name across cells = that area spans those cells.

Responsive Named Areas

/* Mobile: single column stack */
@media (max-width: 768px) {
  .layout {
    grid-template-areas:
      "header"
      "content"
      "sidebar"
      "aside"
      "footer";
    grid-template-columns: 1fr;
  }
}

The named areas stay the same — only the template map changes. Items automatically reflow to their new positions.

Empty Cells

.layout {
  grid-template-areas:
    "header header header"
    ".      content aside"  /* Dot = empty cell */
    "footer footer  footer";
}

Subgrid

This is the feature CSS developers waited years for. Subgrid lets a nested grid inherit track sizing from its parent grid. Without subgrid, nested grids are independent -- their columns don't align with the parent's columns.

.parent {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 1rem;
}

.child {
  grid-column: 1 / -1; /* Spans all parent columns */
  display: grid;
  grid-template-columns: subgrid; /* Inherits parent's column tracks */
  /* Now child's internal items align to the parent's grid lines */
}

Practical Subgrid: Card with Aligned Content

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

.card {
  display: grid;
  grid-template-rows: subgrid; /* Inherit row tracks from parent? */
  /* Problem: parent doesn't define rows — subgrid needs explicit rows */
}

/* Better: Define parent rows explicitly */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, auto); /* 3 row tracks per card */
  gap: 1.5rem;
}

.card {
  grid-row: span 3; /* Each card spans 3 row tracks */
  display: grid;
  grid-template-rows: subgrid; /* Align title/body/footer across cards */
}

Now every card's title, body, and footer align on the same row lines across all cards — even with different content lengths.

Overlapping Grid Items

Wait, grid items can occupy the same cells? Yes. And it enables layered layouts without position: absolute:

.hero {
  display: grid;
  grid-template-rows: 1fr auto 1fr;
}

.hero-image {
  grid-area: 1 / 1 / -1 / -1; /* Fill the entire grid */
}

.hero-text {
  grid-area: 2 / 1 / 3 / -1; /* Middle row, all columns */
  z-index: 1; /* Layer above the image */
  text-align: center;
  color: white;
}

No absolute positioning, no wrapper shenanigans. Items simply share cells.

/* Card with overlapping badge */
.card {
  display: grid;
}

.card > * {
  grid-area: 1 / 1; /* All children in the same cell */
}

.badge {
  align-self: start;
  justify-self: end;
  z-index: 1;
  margin: 0.5rem;
}

Responsive Grid Without Media Queries

This is where it all comes together.

/* Fully responsive: 1 column on mobile, fills as many as fit on desktop */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 1.5rem;
}

The min(300px, 100%) handles the edge case where the container is narrower than 300px — the column shrinks to 100% instead of overflowing.

Responsive Sidebar Layout Without Media Queries

.layout {
  display: grid;
  grid-template-columns: fit-content(300px) minmax(0, 1fr);
  gap: 2rem;
}

/* Or: sidebar collapses to stack when space is tight */
.layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
}