Understanding CSS Subgrid

CSS Subgrid solves a fundamental limitation of nested grids: aligning child grid items with parent grid tracks. When you create a grid inside another grid, the child grid normally establishes its own independent track system with no connection to the parent. Subgrid changes this by allowing nested grids to inherit and align with their parent's track definitions, creating seamless alignment across multiple nesting levels.

This capability transforms layouts that would otherwise require complex calculations, magic numbers, or abandoning proper semantic HTML structure. Card grids where content needs to align across cards, form layouts where labels and inputs must line up across rows, and magazine layouts with nested article structures all benefit from subgrid. Understanding when subgrid solves problems that regular Grid cannot is essential for advanced layout work.

The Problem Subgrid Solves

Before subgrid existed, nested grids created a fundamental alignment problem. Consider a card grid where each card contains a title, image, description, and button. You want all titles to align horizontally across cards, all images to align, all descriptions to align, and all buttons to sit at the bottom of their cards regardless of content length. With regular nested grids, this alignment is impossible to achieve reliably.

The parent grid controls card placement but knows nothing about content inside cards. Each card's internal grid is independent, establishing its own row tracks based solely on that card's content. A card with a long title creates taller title rows than cards with short titles. A card with a long description pushes its button further down than cards with short descriptions. The cards themselves might align in the parent grid, but their internal content does not align across cards.

Traditional solutions all involve compromises. You can flatten your HTML, removing the semantic card wrapper and making every piece of content a direct grid child. This works for alignment but destroys your document structure and makes the HTML difficult to understand and maintain. You can use fixed heights for each content section, but this requires magic numbers that break when content changes or viewport sizes shift. You can abandon grid alignment entirely and accept misaligned content. None of these solutions are satisfactory.

Seeing the Problem

The demo below shows three cards with varying content lengths. Notice how without subgrid, the titles, images, descriptions, and buttons do not align across cards. Each card creates its own independent grid based on its content.

Toggle between the two modes above. Without subgrid, each card's content is independent. The middle card's long title pushes everything down, but only in that card. With subgrid enabled, all titles align in the same row, all images align, all descriptions align, and all buttons sit at the same baseline across all cards.

What Subgrid Does

Subgrid provides a clean solution: a nested grid can inherit track definitions from its parent rather than establishing independent tracks. When you declare grid-template-columns: subgrid or grid-template-rows: subgrid on a grid item that is also a grid container, that item's grid uses its parent's track sizing for the specified axis.

The subgrid item participates in the parent grid as a normal grid item, spanning whatever tracks you assign it. But internally, its children align to those inherited parent tracks. If the subgrid spans three parent columns, its children can position themselves within those three columns using the parent's track sizing. This creates alignment between the subgrid's children and other items in the parent grid, even though they are at different nesting levels.

    .card-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: auto 200px 1fr auto;
        gap: var(--spacing-lg);
    }

    .card {
        display: grid;
        grid-row: span 4;
        grid-template-rows: subgrid;
        gap: var(--spacing-sm);
    }
    

Browser Support and Fallbacks

Subgrid support has improved significantly but is not yet universal. As of early 2026, Firefox, Safari, and Chrome all support subgrid. However, older browser versions may not support it. This means production code needs fallback strategies.

The simplest fallback approach uses feature detection with @supports. Define your layout using regular grid techniques that work everywhere, then enhance with subgrid for supporting browsers.

    .card-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: var(--spacing-lg);
    }

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

    @supports (grid-template-rows: subgrid) {
        .card-grid {
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            grid-auto-rows: auto 200px 1fr auto;
        }

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

Subgrid Syntax and Usage

Applying subgrid requires two steps: making an element both a grid item and a grid container, then declaring which axis should use subgrid. The element must be a child of a grid container to receive track information from the parent.

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

    .subgrid-item {
        display: grid;
        grid-column: span 3;
        grid-template-columns: subgrid;
    }
    

The subgrid item uses grid-column: span 3 to span three parent columns. It then declares grid-template-columns: subgrid to inherit those three column tracks. Its children can now position themselves within those inherited columns, aligning perfectly with other items in the parent grid.

Subgrid works independently on each axis. You can subgrid columns while establishing independent rows, or subgrid rows while establishing independent columns, or subgrid both axes simultaneously. This flexibility lets you inherit parent track sizing exactly where needed while maintaining control over other dimensions.

Gaps in Subgrids

Subgrids inherit gaps from their parent by default. If the parent grid has gap: 2rem, the subgrid's tracks include those gaps. You can override this by declaring a different gap value on the subgrid, which creates independent spacing for the subgrid's children while still aligning to parent tracks.

Common Subgrid Patterns

Card Grid with Content Alignment

The most common subgrid use case is card grids where internal content needs to align across cards. Each card becomes a subgrid that inherits rows from the parent, ensuring titles align with titles, images with images, and buttons with buttons across all cards.

    .card-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        grid-auto-rows: auto 200px 1fr auto;
        gap: var(--spacing-lg);
    }

    .card {
        display: grid;
        grid-row: span 4;
        grid-template-rows: subgrid;
        gap: var(--spacing-med);
    }
    

Form Layout with Label Alignment

Forms benefit from subgrid when you need labels to align in one column and inputs in another across multiple form groups. Each fieldset becomes a subgrid inheriting the parent's column tracks.

    .form-grid {
        display: grid;
        grid-template-columns: max-content 1fr;
        gap: var(--spacing-med);
    }

    .form-group {
        display: grid;
        grid-column: span 2;
        grid-template-columns: subgrid;
        gap: var(--spacing-sm);
    }
    

When to Use Subgrid

Subgrid solves specific problems where content needs to align across nesting boundaries. Not every nested grid needs subgrid. Understanding when it provides value versus when regular grid suffices helps you choose the right tool.

Use subgrid when: You have a grid of cards or components where internal content needs to align across items. Multiple content sections need consistent alignment at the same nesting level. Form elements should align across different form groups.

Do not use subgrid when: Each nested grid item has independent content that does not need to align with siblings. The nested grid has completely different track requirements than its parent. You only need one level of grid nesting with no alignment requirements across items.

Progressive Enhancement Strategy

Production code should handle browsers without subgrid support gracefully. The progressive enhancement pattern provides a functional layout for all browsers while delivering enhanced alignment where supported.

    .card-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: var(--spacing-lg);
    }

    .card {
        display: grid;
        grid-template-rows: auto auto 1fr auto;
        gap: var(--spacing-med);
        padding: var(--spacing-med);
        background: var(--color-surface);
        border-radius: var(--radius-med);
    }

    @supports (grid-template-rows: subgrid) {
        .card-grid {
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            grid-auto-rows: auto auto 1fr auto;
        }

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

Looking Forward

Subgrid represents a significant advancement in CSS Grid capabilities, solving problems that previously required compromises or complex workarounds. As browser support continues to improve, subgrid will become a standard tool for sophisticated layouts. The patterns you learn with subgrid apply broadly to any layout where content alignment across nesting boundaries matters.

The upcoming Complex Grid Layouts assignment will provide opportunities to apply subgrid in production-quality layouts. You will build magazine layouts, dashboard interfaces, and card grids that use subgrid to achieve alignment that would be impossible with regular nested grids.