Grid auto flow

Class reference

# Usage

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

<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.