📐 Declarative Grid System

Responsive CSS grid layouts with auto-fitting columns, explicit column counts, column spanning, and zero CSS media queries.

Live Preview: Auto-Fit Responsive Grid

Col 1 (Auto-Fit)

Col 2 (Auto-Fit)

Col 3 (Auto-Fit)

<div layout="grid" grid="auto-fit" min-col="sm" gap="md">
  <div card>Col 1</div>
  <div card>Col 2</div>
  <div card>Col 3</div>
</div>

Live Preview: 12-Column Grid with Spanning

span="8" (Main Content)

span="4" (Sidebar)

span="4"

<div layout="grid" cols="12" gap="sm">
  <div card span="8">Main (span=8)</div>
  <div card span="4">Sidebar (span=4)</div>
</div>

Attribute	Values	Description
`layout="grid"`	-	Initializes display: grid container
`grid="auto-fit"`	`auto-fit`, `auto-fill`	Automatic responsive columns without media queries
`cols="1..12"`	`1` to `12`, `sidebar-left`, `golden-left`	Fixed explicit column counts
`span="1..12"`	`1` to `12`, `full`	Span multiple grid columns on child items
`gap="..."`	`none`, `xs`, `sm`, `md`, `lg`, `xl`, `2xl`	Grid gap spacing