Grid Auto Flow

Kawal bagaimana item diletakkan automatik dalam grid

Sintaks

layout="grid-flow:[value]"

Nilai

Nilai	CSS Output	Huraian
row	grid-auto-flow: row	Letakkan mengikut baris
col	grid-auto-flow: column	Letakkan mengikut lajur
dense	grid-auto-flow: dense	Pembungkusan padat
row-dense	grid-auto-flow: row dense	Baris dengan padat
col-dense	grid-auto-flow: column dense	Lajur dengan padat

Contoh

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

Pratonton

Aliran Baris

layout="grid-flow:row" - Item mengalir mengikut baris (lalai)

1234

Lihat Kod

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

Aliran Lajur

layout="grid-flow:col" - Item mengalir mengikut lajur

1234

Lihat Kod

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