Mastering CSS Grid Subgrid: A Complete Guide

Mastering CSS Grid Subgrid: A Complete Guide

Grab your coffee, pull up a chair, and let's talk about one of the most satisfying CSS features to finally hit prime-time browser support: CSS Grid Subgrid.

You know the exact headache I’m talking about. You’re building a classic card layout. Each card has a thumbnail, a title, a short description, and a "Read More" button at the bottom. The designer wants all the titles to align perfectly across the row, all the descriptions to align, and all the buttons to sit exactly on the same baseline at the bottom. It looks gorgeous in Figma when every title is exactly one line. But then real-world content hits the staging server. One card has a three-line title, another has a two-word title, and suddenly your beautiful grid looks like a jagged, staggered mess.

Subgrid solves this exact, frustrating problem once and for all by letting nested elements "listen" directly to the parent grid.

How we suffered before

Before subgrid became widely supported, aligning child elements across sibling containers was an absolute nightmare. We had to resort to a laundry list of ugly workarounds that made our clean markup cry.

First, we tried hardcoding heights. We would throw a min-height or a fixed height on the card titles. This worked okay until someone resized the browser, changed the font size, or localized the site into German. Suddenly, the text would overflow, overlap, or look completely broken. If you've ever had to handle responsiveness issues related to sizing hacks, you might appreciate our guide on utilizing with standard grids.

Ready-to-use code snippet

Here is a clean, minimal, and fully functional implementation of a card deck using CSS Grid Subgrid. Notice how the card container spans three rows, and its children automatically align perfectly across all cards, regardless of content length.

<!-- HTML Structure -->

<div class="grid-container">

  <!-- Card 1 -->

  <article class="card">

    <h3>Short Title</h3>

    <p>A quick description goes here.</p>

    <button>Read More</button>

  </article>



  <!-- Card 2 -->

  <article class="card">

    <h3>This is a Super Long Title That Spans Multiple Lines Automatically</h3>

    <p>This description has slightly more content to show off how the card content adjusts perfectly.</p>

    <button>Read More</button>

  </article>



  <!-- Card 3 -->

  <article class="card">

    <h3>Medium Title</h3>

    <p>Another short description.</p>

    <button>Read More</button>

  </article>

</div>



<style>

/* The Parent Grid */

.grid-container {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

  /* Each card spans a block of 3 rows: title, paragraph, button */

  grid-template-rows: repeat(auto-fill, auto auto auto);

  gap: 30px 20px;

  padding: 20px;

  background-color: #f4f4f9;

}



/* The Grid Item (Subgrid Container) */

.card {

  display: grid;

  /* Tell the card to span exactly 3 rows of the parent grid */

  grid-row: span 3;

  /* Magic begins here: inherit row definitions from the parent grid */

  grid-template-rows: subgrid;

  

  background: #ffffff;

  padding: 20px;

  border-radius: 8px;

  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);

}



.card h3 {

  margin: 0;

  font-family: sans-serif;

  color: #333;

}



.card p {

  margin: 0;

  font-family: sans-serif;

  color: #666;

  line-height: 1.5;

}



.card button {

  align-self: start;

  justify-self: start;

  padding: 10px 16px;

  background-color: #007bff;

  color: white;

  border: none;

  border-radius: 4px;

  cursor: pointer;

  font-weight: bold;

}

</style>

Common beginner mistake

The single most common mistake developers make when adopting subgrid is forgetting to define the track span on the subgrid container itself.

If you set grid-template-rows: subgrid on a card, but you don't explicitly tell that card how many tracks of the parent grid it is supposed to span (for example, using grid-row: span 3), the browser won't know how many rows to reserve for the child elements. By default, it will fall back to spanning just 1 row, causing all your internal card elements (the title, description, and button) to overlap, stack weirdly, or collapse into a single row track.

Always remember the golden rule of subgrid: the container holding the subgrid must explicitly define its track span (e.g., grid-row: span [number of children] or grid-column: span [number of columns]) so the layout engine knows exactly which parent slices to hand down to the nested elements.

🔥 We publish more advanced CSS tricks, ready-to-use snippets, and tutorials in our Telegram channel. Subscribe so you don't miss out!