Flexbox & Grid
grid-auto-flow
Controlling how auto-placed items get inserted in the grid.
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
Use grid-auto-flow to control how auto-placed grid items flow into the grid.
1
2
3
4
<div class="grid grid-template-rows:56px|56px grid-auto-flow:column"> <div>1</div> <div>2</div> <div>3</div> <div>4</div></div>Fill gaps densely
Use dense to let later items fill earlier holes when possible.
<div class="grid grid-auto-flow:row|dense">…</div>Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="grid-auto-flow:column:hover grid-auto-flow:column@sm grid-auto-flow:column@dark grid-auto-flow:column@print">…</div>