Grid
Use ERow and ECol to compose responsive structure before applying component-level styling. The grid controls spacing, breakpoint behavior, and column distribution while your content components keep ownership of visuals and semantics.
Usage
Adjust gap, row modifiers, and base cols span to preview how the same content adapts across layout densities.
Column A
Column B
Column C
Responsive breakpoints
Combine cols with breakpoint props such as md and lg to define mobile-first spans that expand progressively.
Main content
Spans most of the row on medium and large screens.
Sidebar
Stacks below content on mobile and aligns beside it from md.
Nested layouts
Nest rows inside columns when a content region needs an internal sub-grid. Keep nesting shallow and scoped to the part of the page that truly needs local structure.
Primary column
Nested A
Nested B
Support rail
Use for filters, context, or quick actions.
API reference
Reference the verified public props for ERow and ECol.
ERow props
| Property | Type | Default |
|---|---|---|
| dense | boolean | false |
Compacts row spacing by applying the dense row modifier. | ||
| auto | boolean | false |
Enables automatic width behavior for row children based on their content and column props. | ||
| equal | boolean | false |
Distributes available width equally among sibling columns. | ||
| noGutters | boolean | false |
Removes the standard horizontal gutter spacing between columns. | ||
| gap | GapValue | number | string | undefined |
Overrides row gap using framework tokens (none/xs/sm/md/lg) or an integer pixel value. | ||
ECol props
| Property | Type | Default |
|---|---|---|
| cols | number | string | 'auto' | undefined |
Sets the base column span across 12 tracks, or uses auto sizing. | ||
| xs | number | string | 'auto' | undefined |
Sets the span for the extra-small breakpoint. | ||
| sm | number | string | 'auto' | undefined |
Sets the span for the small breakpoint. | ||
| md | number | string | 'auto' | undefined |
Sets the span for the medium breakpoint. | ||
| lg | number | string | 'auto' | undefined |
Sets the span for the large breakpoint. | ||
| xl | number | string | 'auto' | undefined |
Sets the span for the extra-large breakpoint. | ||
Slots and events
ERow and ECol expose only the default slot and do not emit public events.