Elements logo

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.