Grid auto flow

Class reference

# Usage

Use the auto-rows-{size} utilities to control the size implicitly-created grid rows.

<div class="grid grid-flow-col auto-rows-max">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

# Responsive

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

<div class="grid grid-flow-row auto-rows-max md:auto-rows-min">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

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