Grid System Layout
v1.0.0A responsive CSS grid layout system.
Responsive Grid Blueprint
A simple example showing the default behavior.
01
02
03
04
05
06
Asymmetric Column Spanning
Use different column spans to create asymmetric layouts.
Span 1 (Nav)
Span 3 (Workspace Canvas)
Span Full (Footer Segment)
Grid API Reference
All available props for this component.
Property | Type | Default | Description |
|---|---|---|---|
| cols | 1 | 2 | 3 | 4 | 5 | 6 | 12 | 'default' | 'default' | Configures responsive CSS Grid columns across screen break breakpoints. |
| gap | 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Applies standard margin pacing parameters between inner layout item nodes. |
| align | 'start' | 'center' | 'end' | 'stretch' | 'stretch' | Sets element positioning configurations along the vertical layout track axes. |
| as | React.ElementType | 'div' | Overrides structural tag mappings to render custom container boxes (e.g. 'section', 'form'). |