Grid Columns

Tentukan templat lajur grid

Sintaks

layout="grid-cols:[value]"

Nilai

Nilai	CSS Output	Huraian
1-12	grid-template-columns: repeat({n}, minmax(0, 1fr))	N lajur sama
none	grid-template-columns: none	Tiada lajur ditakrifkan
subgrid	grid-template-columns: subgrid	Guna grid induk

Contoh

<div layout="grid grid-cols:3">3 columns</div>
<div layout="grid grid-cols:12">12 columns</div>

Pratonton

Grid 3 Lajur

layout="grid-cols:3" - Lajur lebar sama dengan grid-cols:3

123456

Lihat Kod

<div layout="grid grid-cols:3" 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>
  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">5</span>
  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">6</span>
</div>

Grid 4 Lajur

layout="grid-cols:4" - Susun atur empat lajur sama

1234

Lihat Kod

<div layout="grid grid-cols:4" 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>