Nested Grids

Nested Grids

A nested grid places a new row inside a column so a large layout region can contain its own twelve-column layout.

Core concept

Explain the parent row, parent column, inner row, and inner columns as separate grid contexts. The inner row does not continue the parent\'s column numbering; it starts its own twelve-column system.

Using it in a real interface

Use a dashboard where the main content column contains two statistic cards and a chart. The outer grid controls sidebar versus content, while the inner grid controls the cards and chart.

Implementation notes

Keep nesting purposeful. Deeply nested rows can make markup difficult to maintain, so use a new grid context only when the content region genuinely needs independent column relationships.