grid-auto-flow
Choose row or column auto-placement and optional dense packing.
Overview
| Class | Declarations |
|---|---|
grid-auto-flow:row | grid-auto-flow: row;
|
grid-auto-flow:column | grid-auto-flow: column;
|
grid-auto-flow:dense | grid-auto-flow: dense;
|
grid-auto-flow:row|dense | grid-auto-flow: row dense;
|
grid-auto-flow:column|dense | grid-auto-flow: column dense;
|
Basic usage
Fill by column
grid-auto-flow:column fills each column before adding another. Compare it with the default row flow using the same two columns, two 56px rows and four items. Column flow puts 01 above 02; row flow puts them side by side.
<div id="layout" class="grid grid-cols:2 grid-auto-flow:row grid-template-rows:56px|56px gap-md w:17.5rem max-w:100%"> <div id="target" class="p-sm">01</div> <div id="peer" class="p-sm">02</div> <div id="item-3" class="p-sm">03</div> <div id="item-4" class="p-sm">04</div></div><div id="layout" class="grid grid-cols:2 grid-auto-flow:column grid-template-rows:56px|56px gap-md w:17.5rem max-w:100%"> <div id="target" class="p-sm">01</div> <div id="peer" class="p-sm">02</div> <div id="item-3" class="p-sm">03</div> <div id="item-4" class="p-sm">04</div></div>Define the rows that column flow should fill. After those rows are occupied, additional items can create implicit columns sized by grid-auto-columns.
Fill gaps densely
grid-auto-flow:row|dense lets later items fill earlier holes. Items 01 and 02 each span two columns, leaving a one-cell hole after 01. Sparse placement keeps moving forward; dense placement returns to that hole for item 03.
<div id="layout" class="grid grid-cols:3 grid-auto-flow:row grid-auto-rows:48px gap-md w:17.5rem max-w:100%"> <button id="target" class="grid-col-span:2 p-sm" type="button" tabindex="0">01</button> <button id="peer" class="grid-col-span:2 p-sm" type="button" tabindex="0">02</button> <button id="item-3" class="p-sm" type="button" tabindex="0">03</button> <button id="item-4" class="p-sm" type="button" tabindex="0">04</button></div><div id="layout" class="grid grid-cols:3 grid-auto-flow:row|dense grid-auto-rows:48px gap-md w:17.5rem max-w:100%"> <button id="target" class="grid-col-span:2 p-sm" type="button" tabindex="0">01</button> <button id="peer" class="grid-col-span:2 p-sm" type="button" tabindex="0">02</button> <button id="item-3" class="p-sm" type="button" tabindex="0">03</button> <button id="item-4" class="p-sm" type="button" tabindex="0">04</button></div>Focus a numbered button, then press Tab. In both grids, sequential focus follows 01 → 02 → 03 → 04 even when 03 appears before 02 visually. Keep source order meaningful and use dense packing for content whose visual rearrangement will not confuse reading or keyboard navigation.
Apply conditionally
Use conditional queries to change the layout at a real viewport width. The grid fills across rows initially and down columns from sm. The track sizes, DOM order and item count stay the same.
<div id="layout" class="grid grid-cols:2 grid-auto-flow:row grid-template-rows:56px|56px gap-md w:17.5rem max-w:100% grid-auto-flow:column@sm"> <div id="target" class="p-sm">01</div> <div id="peer" class="p-sm">02</div> <div id="item-3" class="p-sm">03</div> <div id="item-4" class="p-sm">04</div></div>