CSS Subgrid decoded: The latest in CSS technology

CSS Grid layout revolutionized web development by allowing content to be organized into a grid with rows and columns. In one of my previous articles about CSS Grid, we explored the foundational concepts and capabilities it brought to the table. However, challenges arose when nesting grids inside grids, paving the way for CSS Subgrid—a powerful extension to the CSS Grid.

In this tutorial, we’ll delve into the intricacies of subgrid, exploring its syntax, properties, and practical applications. But first, if you haven’t explored the wonders of CSS Grid, I recommend checking out my earlier article on it here, as it lays the groundwork for understanding the evolution to CSS Subgrid.

Let’s embark on this journey to enhance your web layout skills with the seamless power of CSS Subgrid.

What is subgrid and how is it different from a regular grid?

Subgrid allows a grid item to become a grid container, inheriting the parent grid’s tracks. This means you can now nest grids more flexibly. Without subgrid, nested grids are independent and cannot align with the parent grid lines.

For example, consider a 12-column grid. With subgrid, you can easily divide a section into three columns that span four tracks each. The subgrid columns will seamlessly align with the parent columns.

Subgrid requires less CSS code, making your layouts more consistent. Aligning nested grids becomes effortless!

Basic syntax and properties

Let’s dive into the basic syntax and properties of subgrid: To create a subgrid, add “display: subgrid” to the grid item:

.grid-item {
  display: subgrid;
}

This causes the grid item to inherit the parent grid’s column and row configuration. You can then style subgrid items as usual with grid-column, grid-row, etc.

Simple subgrid layout example

Here is a simple subgrid layout:

.parent-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.subgrid-item {
  grid-column: span 6;
  display: subgrid; 
  grid-template-columns: subgrid; /* inherit parent columns */
}

Spanning subgrid tracks

Use the span keyword to span across subgrid tracks. This makes aligning items easy:

.subgrid-item div {
   grid-column: span 2; 
}

This tracks the 12 column parent grid, not the subgrid. Subgrid handles the inherited tracks for you!

Use cases and examples

Let’s explore some practical use cases and examples of subgrid in action:

Example 1: Simplifying complex layouts

html

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

CSS

container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.item {
  display: grid;
  grid-template-columns: subgrid;
  border: 1px solid #333;
  padding: 10px;
}

Example 2: Aligning nested grids

html

<div class="parent-grid">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="nested-grid">
    <div class="nested-item">1</div>
    <div class="nested-item">2</div>
  </div>
  <div class="item">C</div>
</div>

CSS

.parent-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.item {
  border: 1px solid #333;
  padding: 10px;
}
.nested-grid {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 2; /* Spans two columns in the parent grid */
}
.nested-item {
  border: 1px solid #666;
  padding: 5px;
}

Hands-On with Subgrid

To help illustrate subgrid in action, here’s an interactive demo you can tinker with. This jsFiddle lets you modify the CSS and HTML to see how subgrid behaves in a real layout. Play around with the grid and subgrid settings to get a hands-on feel for how they work together.

Browser support for subgrid

Subgrid enjoys decent browser support, working seamlessly in the latest versions of Firefox, Chrome, and Edge. Safari offers partial support. The only major holdout is IE11 and older browsers.

For optimal browser support, consider combining subgrid with fallback code using regular CSS Grid styles.

Conclusion

CSS Subgrid opens up a new era for web page layouts, allowing for more flexible and consistent grid structures. By understanding its syntax, properties, and browser support, you can enhance your design capabilities and simplify complex layouts. Experiment with subgrid in your projects to experience the power of nested grids aligned seamlessly with their parent counterparts.

About The Author