Grid
Item 1
Item 2
Item 3
Item 4
Narrow 1
Narrow 2
Narrow 3
Col 1
Col 2
Col 3
Spans 2 columns
Single column
Spans 2 at medium+ container
Single
Wide, tall item
Two-column item
Small item can fill an earlier gap
The grid-dense variant may change visual order to fill gaps. In browsers that support reading-flow: grid-rows, sequential reading and keyboard navigation follow the visual rows. Other browsers keep normal source-order placement.
A summary that spans two columns and four rows
A four-row item beginning at medium width
One row by default