Grid auto flow

Utilities for controlling how elements in a grid are auto-placed


Class reference

ClassProperties
grid-flow-rowgrid-auto-flow: row;
grid-flow-colgrid-auto-flow: column;
grid-flow-row-densegrid-auto-flow: row dense;
grid-flow-col-densegrid-auto-flow: column dense;

Usage

Use the grid-flow-{keyword} utilities to control how the auto-placement algorithm works for a grid layout.

1
2
3
4
5
6
7
8
9
<div class="grid grid-flow-col grid-cols-3 grid-rows-3 gap-4">
<div>1</div>
<!-- ... -->
<div>9</div>
</div>

Responsive

To control the grid-auto-flow property at a specific breakpoint, add a {screen}: prefix to any existing grid-auto-flow utility. For example, use md:grid-flow-col to apply the grid-flow-col utility at only medium screen sizes and above.

<div class="grid grid-flow-col **md:grid-flow-col** ...">
<div>1</div>
<!-- ... -->
<div>9</div>
</div>

For more information about Elements’ responsive design features, check out the Responsive Design documentation.