Grid Auto Sizing

Kawal saiz trek grid yang dijana automatik

Sintaks

layout="auto-cols:[value]" or layout="auto-rows:[value]"

Nilai

Nilai	CSS Output	Huraian
auto	auto	Saiz automatik
min	min-content	Kandungan minimum
max	max-content	Kandungan maksimum
fr	minmax(0, 1fr)	Unit pecahan

Contoh

<div layout="grid auto-cols:min">Auto min columns</div>

Pratonton

Lajur Automatik

layout="auto-cols:fr" - Trek lajur bersaiz automatik

Auto 1Auto 2Auto 3

Lihat Kod

<div layout="grid grid-flow:col auto-cols:fr" 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">Auto 1</span>
  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">Auto 2</span>
  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">Auto 3</span>
</div>