Grid auto flow

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


Class reference

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

Usage

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

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

Responsive

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

<div class="grid grid-flow-col auto-cols-max md:auto-cols-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.