CSS Subgrid allows nested grid items to inherit the parent grid’s track structure, enabling child elements to align with the parent’s columns and rows instead of creating independent grids. 1. It solves the previous limitation where nested grids required manual replication of track sizes, which was fragile and hard to maintain. 2. By using grid-template-columns: subgrid or grid-template-rows: subgrid, child grids inherit the parent’s grid lines, ensuring alignment across nested layouts. 3. Key benefits include seamless alignment across nested grids, easier responsive design without duplicated media queries, and reduced maintenance by avoiding repeated track definitions. 4. Common use cases are forms with aligned labels and inputs, card components with consistent internal alignment, and complex dashboards requiring structural continuity. 5. As of 2024, subgrid is supported in modern browsers including Firefox, Chrome, Edge, and Safari, though checking Can I Use is recommended for older browser support. 6. Subgrid only works within a direct grid item, can be applied to columns, rows, or both, and respects normal spacing and alignment properties. 7. Example: in a form, each row can be a grid item using grid-column: span 2 with grid-template-columns: subgrid, allowing labels and inputs to align across rows using the shared column structure. Subgrid ensures true layout continuity from parent to child grids, making complex, aligned UIs significantly easier to build and maintain.

CSS Subgrid is a powerful feature introduced as part of the CSS Grid Level 2 specification that allows nested grid items to inherit the track (column and row) structure of their parent grid. In simpler terms, it lets child elements inside a grid item participate in the parent’s grid layout, rather than creating their own independent grid.

This solves a long-standing limitation in CSS Grid: before subgrid, when you placed a grid container inside a grid cell, it couldn’t align its columns or rows with the parent grid unless you manually recreated the same track sizes — which was fragile and hard to maintain.

How Subgrid Works

Normally, when you define a grid item as a grid container, it sets up its own separate grid context. With subgrid, instead of redefining columns and rows, the inner grid can reuse the parent’s grid lines.

You apply subgrid using the grid-template-columns or grid-template-rows properties with the value subgrid:

.parent {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 100px 200px;
}

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

In this example, the .child element uses the same column structure as .parent, and any grid children inside .child can align with the parent’s columns.

Key Benefits of Subgrid

• Alignment across nested grids: Elements inside nested containers can align perfectly with the parent grid’s columns and rows.
• Responsive design made easier: You don’t have to duplicate media queries or track definitions in child grids.
• Less brittle layouts: Avoids repeating track sizing in multiple places, reducing maintenance overhead.

Common Use Cases

• Forms with aligned labels and inputs: When each form field is in a grid item, subgrid ensures labels and inputs line up across different parent grid cells.
• Card components in a grid: Cards may have internal structure (title, image, footer), and subgrid helps align internal elements across multiple cards.
• Complex dashboards or data layouts: Where nested sections must align with an overall page grid.

Browser Support and Usage Notes

As of 2024, CSS Subgrid is supported in most modern browsers, including Firefox, Chrome, Edge, and Safari (with some minor caveats in older versions). However, it’s still wise to check current support on Can I Use if you're targeting older environments.

Also note:

• Subgrid only works within a grid item — the parent must be a grid container.
• You can use subgrid on columns, rows, or both.
• Margins, paddings, and alignment still apply normally.

Example: Aligning Form Fields

.form-grid {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 2;
}

.form-label {
  grid-column: 1;
}

.form-input {
  grid-column: 2;
}

Here, even though each form row is a grid item in the main layout, its internal elements can align across rows using the shared column structure.

Basically, subgrid brings true layout continuity from parent to child grids — making complex, aligned UIs much easier to build and maintain. It’s not magic, but it feels like it.

The above is the detailed content of What is CSS Subgrid?. For more information, please follow other related articles on the PHP Chinese website!