Grid Auto Sizing

Control size of auto-generated grid tracks

Syntax

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

Values

Value	CSS Output	Description
auto	auto	Auto size
min	min-content	Minimum content
max	max-content	Maximum content
fr	minmax(0, 1fr)	Fractional unit

Examples

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

Preview

Auto Columns

layout="auto-cols:fr" - Automatically sized column tracks

Auto 1Auto 2Auto 3

View Code

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