Row
Row
24-column Flex layout. Row manages gutters and alignment; Col manages spans, offsets, ordering and breakpoints. Use Grid for CSS Grid collapse and suffix items.
Choosing a layout
- Grid + GridItem: Use for form columns and card grids with consistent column widths, spans, responsive column counts, or collapsed rows and suffix items.
- Row + Col: Use for 24-column Flex layouts that need horizontal/vertical alignment, wrapping control, fixed and flexible widths together, or responsive ordering. Row controls the row; Col controls width, offset and order.
- Space: Use for simple groups of buttons, tags or text that only need spacing, direction and alignment. Use native Flex for more flexible width allocation.
Examples
24-column layout
Two-axis and responsive gutters
Horizontal and vertical alignment
Wrapping and plain container mode
Nested rows and isolated gutters
Props
| Prop | Description | Type | Default |
|---|---|---|---|
| gutter | Gutter: number, responsive object or [horizontal, vertical] | RowGutter | 0 |
| justify | Horizontal alignment | start / center / end / space-around / space-between | start |
| align | Vertical alignment | start / center / end / stretch | start |
| wrap | Wrap columns | boolean | true |
| div | Use Row and Col as plain divs without layout styles | boolean | false |
Events
| Event | Description |
|---|---|
| click | Native MouseEvent, emitted once per click |
Slots
| Slot | Description |
|---|---|
| default | Layout content |
Methods
| Method | Description |
|---|
Responsive behavior and accessibility
Breakpoints use the viewport: xs is the baseline, sm ≥576, md ≥768, lg ≥992, xl ≥1200, xxl ≥1600px. Values cascade from the largest matching configured breakpoint. SSR uses xs; the viewport and Grid collapse/reordering are resolved after mount. These layout containers add no keyboard shortcuts; consumers provide semantic content and focusable controls. No public methods or dedicated theme tokens.
Imports
Grid only owns Grid.Item. Row and Col are standalone components with independent entries, styles, documentation, menus and demos. Grid.Row/Grid.Col, Grid re-exports of Row/Col and GridRowInstance/GridColInstance are removed. Import from the library root or standalone row/col entries. Installing Grid no longer registers Row/Col.