Interview Question

What are subgrid layouts?

Subgrid shares parent grid tracks with a nested grid.

💡 Concept ✅ Quick Revision 🎨 CSS

Answer

Subgrid lets a nested grid use track sizing from its parent grid. • It is selected with the subgrid value for rows, columns, or both. • Nested items can align with tracks defined by the outer grid. • The nested grid still has its own items and placement behavior.

💡 Simple Example

.form { display: grid; grid-template-columns: max-content 1fr; } .field { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; }

⚡ Quick Revision

Subgrid shares parent grid tracks with a nested grid.