Grid Auto Flow

Control how auto-placed items flow in grid

Syntax

layout="grid-flow:[value]"

Values

Value	CSS Output	Description
row	grid-auto-flow: row	Place by row
col	grid-auto-flow: column	Place by column
dense	grid-auto-flow: dense	Dense packing
row-dense	grid-auto-flow: row dense	Row with dense
col-dense	grid-auto-flow: column dense	Column with dense

Examples

<div layout="grid grid-flow:col">Column flow</div>

Preview

Row Flow

layout="grid-flow:row" - Items flow by row (default)

1234

View Code

<div layout="grid grid-cols:3 grid-flow:row" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">1</span>
  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">2</span>
  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">3</span>
  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">4</span>
</div>

Column Flow

layout="grid-flow:col" - Items flow by column

1234

View Code

<div layout="grid grid-rows:2 grid-flow:col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">1</span>
  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">2</span>
  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">3</span>
  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">4</span>
</div>