Question 1

What is CSS subgrid?

Accepted Answer

CSS subgrid lets a grid item's children participate in the parent grid's tracks. Instead of defining an independent grid inside a grid item, you use subgrid to inherit the parent's row and column tracks. This solves the long-standing problem of aligning nested card content across multiple cards.

Question 2

Which browsers support CSS subgrid?

Accepted Answer

CSS subgrid is supported in Firefox, Chrome 117+, Safari 16+, Edge 117+ and all modern browsers released after mid-2023. It's safe to use in production for most projects. For older browser support, the layout gracefully degrades to a regular grid.

Question 3

What is the difference between subgrid and nested grid?

Accepted Answer

A nested grid creates a completely new set of tracks independent of the parent. With subgrid, the child uses the parent's track sizing, so all cards in a row of cards can have headings that line up horizontally, even when content lengths vary.

Question 4

Can I subgrid in only one direction?

Accepted Answer

Yes. Use grid-template-columns: subgrid to inherit columns only, grid-template-rows: subgrid to inherit rows only, or both together. This is useful when you want cards to share a common row height but use their own column layout, or vice versa.

🧱

🎯 Baseline ✓

👁

📋