Mastering CSS Subgrid: Align Rows and Columns in Chrome

CSS Subgrid is one of the most powerful features introduced in CSS Grid Level 2, and Chrome has full support for it. If you’ve ever struggled with aligning nested grid items with their parent grid, subgrid is the solution you’ve been waiting for. In this article, we’ll explore how to use subgrid to share rows and columns across nested grids, creating perfectly aligned layouts that were previously impossible to achieve without JavaScript.

What is CSS Subgrid?

CSS Subgrid allows nested grids to inherit their parent grid’s row and column tracks. When you create a grid inside another grid, the child grid can optionally align its rows and columns with the parent grid, creating a seamless design where elements across different nesting levels line up perfectly.

Before subgrid, nested grids created their own independent track systems. This meant that even if you wanted to align items in a nested grid with items in the parent grid, you had to manually specify sizes that matched. This was fragile and often broke when content changed.

Browser Support for Subgrid

Chrome has supported CSS Subgrid since version 90, released in April 2021. Firefox has had support since version 71, and Safari added it in version 16. This means you can safely use subgrid in production, especially for Chrome-focused projects.

To use subgrid, simply specify display: grid on your container, and then on the nested grid, use grid-template-rows: subgrid or grid-template-columns: subgrid (or both) to inherit the parent grid’s tracks.

Creating a Basic Subgrid Layout

Let’s start with a practical example. Imagine you have a card component with a header, body, and footer, and inside the body, you have a grid of items that should align with the overall card layout.

.parent-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 20px;
}

.nested-grid {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}

In this example, the nested-grid inherits the three columns from its parent parent-grid. The items inside nested-grid will automatically align with the parent’s column tracks, regardless of how many items you add or how they’re sized.

Aligning Rows with Subgrid

The real power of subgrid becomes apparent when you need to align rows across multiple nested grids. Consider a typical web page layout with multiple card components, each containing different nested content that needs to align vertically.

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4, auto);
  gap: 24px;
}

.card {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
}

.card-content {
  /* This grid inherits the 4 rows from .container */
  grid-template-rows: subgrid;
}

By using grid-template-rows: subgrid, all cards in the same row will have their content aligned, even if the content varies in length. This is incredibly useful for creating consistent card layouts where text, images, and other elements always line up perfectly.

Practical Example: Product Cards

Let’s build a practical example that demonstrates subgrid in action. We’ll create a product listing where each product card has a title, description, and price, with multiple cards in a row that need to align.

<div class="product-grid">
  <div class="product-card">
    <h3>Product Title</h3>
    <p>Product description goes here</p>
    <span class="price">$99.99</span>
  </div>
  <div class="product-card">
    <h3>Another Product</h3>
    <p>This description is longer and might wrap to multiple lines</p>
    <span class="price">$149.99</span>
  </div>
</div>

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 20px;
}

.product-card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: 1 / -1;
  padding: 16px;
  background: #f5f5f5;
  border-radius: 8px;
}

With this setup, all product cards will share the same row structure, ensuring that titles, descriptions, and prices always align across the entire row, regardless of content length.

Using Subgrid with Chrome DevTools

Chrome DevTools makes it easy to visualize and debug subgrid layouts. When you inspect an element using subgrid, you’ll see a badge labeled “subgrid” next to the element in the Elements panel. The Grid inspector also shows how the nested grid inherits tracks from its parent.

To visualize subgrid tracks:

  1. Open Chrome DevTools (F12)
  2. Select the element with subgrid applied
  3. Look for the grid overlay in the Styles pane
  4. Check “Show track sizes” to see the inherited dimensions

This visual feedback is invaluable for understanding how your subgrid layouts work and debugging alignment issues.

Advanced Tips for Subgrid

Combining Subgrid with Named Lines

You can use named grid lines with subgrid for even more control:

.parent {
  display: grid;
  grid-template-columns: [start] 1fr [middle] 1fr [end];
}

.child {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: start / end;
}

Responsive Subgrid Layouts

Subgrid works seamlessly with responsive design. You can change the parent grid structure at different breakpoints, and nested subgrids will automatically adapt:

@media (min-width: 768px) {
  .container {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .container {
    grid-template-columns: repeat(4, 1fr);
  }
}

Performance Considerations

CSS Grid and subgrid are highly performant because they use the GPU for layout calculations. Unlike JavaScript-based solutions, subgrid doesn’t require any runtime calculations, making your pages faster and more responsive.

Common Pitfalls to Avoid

When working with subgrid, keep these tips in mind:

  1. Remember to specify both directions: Use both grid-template-columns: subgrid and grid-template-rows: subgrid when you need alignment in both directions.

  2. Subgrid only inherits exposed tracks: A nested grid can only inherit tracks that span its area. Make sure the parent grid has the tracks you need.

  3. Browser fallbacks: While Chrome supports subgrid, older browsers don’t. Use feature queries (@supports (grid-template-rows: subgrid)) for graceful degradation.

Conclusion

CSS Subgrid is a game-changer for creating complex, aligned layouts in Chrome. By allowing nested grids to inherit their parent’s row and column tracks, subgrid makes it possible to create designs that were previously impossible or required JavaScript hacks.

Whether you’re building product listings, card layouts, or complex dashboard interfaces, subgrid provides the alignment control you need. Combined with Chrome’s excellent DevTools support, you have everything you need to build robust, aligned layouts that work seamlessly across modern browsers.

For Chrome users who want to optimize their browser experience while working on web projects, consider trying Tab Suspender Pro—a Chrome extension that helps manage open tabs and improves browser performance.

Built by theluckystrike — More tips at zovo.one