Column & Grid
v1.0.0A responsive 12-column grid layout.
12-Column Track Basics
A simple example showing the default grid behavior.
span=4
span=8
Responsive Breakpoint Inheritances
See how the layout responds to different widths.
span=12 md=6 lg=3
span=12 md=6 lg=3
span=12 md=6 lg=3
span=12 md=6 lg=3
Visual Gutter Scaling
Try different gap sizes between columns.
Extra Large Gap
Extra Large Gap
Properties API
All available props for this component.
| Property | Type | Default | Description |
|---|---|---|---|
| gap | "none" | "xs" | "sm" | "md" | "lg" | "xl" | "md" | Alters the internal row/column separation tracks gutter spacing metrics on the main Grid wrapper. |
| span | ColumnSpan (1-12 | 'auto' | 'full') | "full" | Fallback standard mobile or uniform breakpoint span constraint value. |
| md | ColumnSpan | - | The span scale calculation initialized at the medium layout viewport layer (768px+). |
| lg | ColumnSpan | - | The span scale calculation initialized at the large layout viewport layer (1024px+). |