Grid Auto Flow

v1.2.0+

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

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

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 utility at only medium screen sizes and above.

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

By default, only responsive variants are generated for grid-auto-flow utilities.

For example, this config will also generate hover and focus variants:

Disabling

If you don’t plan to use the grid-auto-flow utilities in your project, you can disable them entirely by setting the gridAutoFlow property to false in the section of your config file:

← Grid Row Start / End