CSS subgrid (Subgrid) is a feature in the CSS Grid layout module that allows mesh items to inherit the track size (columns and rows) of their parent grid. Mainly solves the problem of maintaining alignment consistency in nested layouts. When using it, you need to set grid-template-columns: subgrid to allow the subgrid to follow the parent structure. Suitable for scenarios such as forms, card components and dashboards. Modern browsers support well, but are not compatible with IE11 and earlier versions. In addition, sub-grids are only suitable for direct sub-elements, and deep nesting needs to be applied layer by layer.

CSS Subgrid is a feature within the CSS Grid Layout module that allows a grid item to inherit the track sizing (columns and rows) from its parent grid. In simpler terms, it lets you create nested grids that align with the main grid's structure without having to redefine column or row sizes again.

The key problem subgrid solves is alignment consistency in nested layouts. Without subgrid, when you nest one grid inside a grid cell, the inner grid operates independently — meaning you have to manually match column widths or row heights if you want things to line up properly. This can get messy fast, especially in responsive designs where track sizes change based on available space.

When Should You Use Subgrid?

You'll find subgrid useful when you need nested content to follow the same layout rhythm as the parent grid. For example:

• Forms with aligned labels and inputs across multiple sections
• Card components where internal elements like titles or buttons must line up across cards
• Complex dashboards with consistent column structures inside each widget

Using subgrid ensures everything stays visually aligned without relying on hardcoded widths or JavaScript calculations.

How Does It Work?

When you define a direct child of a grid container as display: grid , normally it creates its own independent grid. But if you set grid-template-columns: subgrid (and/or rows), it will use the parent's column definitions instead.

Here's a basic example:

 .parent {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

.child {
  display: grid;
  grid-template-columns: subgrid;
}

Now .child won't define its own columns — it will follow the three-column structure of .parent . This helps maintain visual consistency, especially when building complex UIs.

Browser Support and Considerations

Subgrid has decent support in modern browsers, including Chrome, Edge, and Firefox. Safari added support in recent versions, so it's becoming more reliable across the board.

Still, always check your target audience's browser usage before diving in. If you need older browser compatibility (like IE11), subgrid won't work — and trying polyfills might not be worth the effort. In those cases, you may need to fall back to using extra wrapper elements or JavaScript-based alignment.

Also, keep in mind that subgrid only works on direct children of a grid container. So if you're nesting deeper than one level, you'll need to apply subgrid at each relevant level individually.

Basically that's it.

The above is the detailed content of What is a subgrid and what problem does it solve?. For more information, please follow other related articles on the PHP Chinese website!