Beyond the Grid: Exploring Use Cases for Subgrid in CSS Grid Layout

Subgrid Essentials: Key Facts to Know

subgrid, representing a sub-grid within a grid layout, was not introduced alongside the initial CSS Grid specification. Instead, it arrived several years later as part of CSS Grid Level 2. Regarding compatibility, it may take another year or two before it’s fully reliable for public-facing projects. However, for internal or mid-tier platform projects, you can start exploring its capabilities now.

subgrid is not an independent CSS property; instead, it is a keyword supported by the grid-template-columns and grid-template-rows properties. To use it effectively, the parent container must already have a Grid layout defined. Without this context, while no syntax errors will occur, the rendering outcome will remain unaffected.

For example:

.container {
    display: grid;
}
.item {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: subgrid;
}

When to use subgrid

The Grid layout manages the larger organizational structure, while subgrid can be used for more detailed alignment and layout effects within.

That said, subgrid is not strictly indispensable because the dimensions created by a Grid layout are calculable, and many similar effects can be achieved using Flex layout within the grid.

This is also one of the main reasons why discussions about subgrid are relatively quiet, as the demand within the community isn’t particularly pressing.

For this reason, I don’t intend to dive into overly complex or detailed examples of subgrid. Instead, I will share one scenario where it fits perfectly—a recent project I worked on, which serves as a practical example.

Use Case

This page displays a jira sprint, with each status containing multiple items. The description content of these items varies—some are detailed, while others are brief. Regardless of the content length, the height of each row must remain uniform for a visually consistent layout, as illustrated in the screenshot below:

This type of rule-based list layout is ideal for the Grid layout. We can configure the list container as follows:

.container {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
}

The repeat(auto-fill, minmax...) method is essential for all front-end developers to master as it is a best practice for implementing flexible list layouts. We will explore the repeat() function in more detail in future articles.

The implementation above is something many front-end developers are familiar with, but what about aligning the content within the list?

This is a perfect scenario for using a subgrid layout.

Let’s assume the HTML is as follows:

<div class="container">
    <section class="item">
        <h4>title</h4>
        <p>owner</p>
        <blockquote>description</blockquote>
        <footer>timestamp</footer>
    </section>
    ... <!-- repeat -->
</div>

.container {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.item {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    gap: .5rem;
}

.item {
    padding: .75rem;
    background: #f0f3f9;
}
.item blockquote {
    background-color: skyblue;
}
.item h4 {
    background-color: #333;
    color: #fff;
}

At this point, you can see that the height of the child elements within all Grid items is equal across every row, as shown in the screenshot below:

Additional notes

Firstly, the first subgrid will inherit the gap value from its ancestor Grid layout.

For example, in the case above, if the .item element does not set gap: .5rem, it will instead be rendered with the parent’s gap: 1rem.

Secondly, subgrid requires the span range to be defined.

You can set the span range on subgrid child elements using grid-row or grid-column properties, depending on the subgrid’s direction.

If a subgrid child element spans multiple rows or columns, you need to use grid-row or grid-column properties on the subgrid element’s children.

The effect shown in this example can also be mimicked using Flex layout. For instance, setting the description blockquote element to flex: 1 will utilize the remaining space, which can work for most scenarios.

subgrid is particularly useful when all child items need to maintain consistent size alignment, especially in more structured, deeply nested layouts.