grid-auto-flow#

#Introduction

The grid-auto-flow CSS property controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.

#Examples

css-apisrc/grid-auto-flow/App.tsx

Preview

#Syntax

grid-auto-flow: row;
grid-auto-flow: column;
grid-auto-flow: row dense;
grid-auto-flow: column dense;
grid-auto-flow: dense;

#Values

This property may take one of two forms:

a single keyword: one of row, column, or dense.

two keywords: row dense or column dense.

• row

  Default value. Items are placed by filling each row in turn, adding new rows as necessary. If neither row nor column is provided, row is assumed.

• column

  Items are placed by filling each column in turn, adding new columns as necessary.

• dense

  "dense" packing algorithm attempts to fill in holes earlier in the grid, if smaller items come up later. This may cause items to appear out-of-order, when doing so would fill in holes left by larger items.

  If it is omitted, a "sparse" algorithm is used, where the placement algorithm only ever moves "forward" in the grid when placing items, never backtracking to fill holes. This ensures that all of the auto-placed items appear "in order", even if this leaves holes that could have been filled by later items.

#Formal definition

#Formal syntax

grid-auto-flow = [ row | column ] || dense

#Compatibility