Grid auto flow

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


Class reference

ClassProperties
auto-rows-autogrid-auto-rows: auto;
auto-rows-mingrid-auto-rows: min-content;
auto-rows-maxgrid-auto-rows: max-content;
auto-rows-frgrid-auto-rows: minmax(0, 1fr);

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