Row
A flex row that holds columns. Each Col takes a number of twelfths of the row, so the spans in a row should add up to 12 or less.
General
Three columns of the same size.
Justify
justify places the columns when they do not fill the row.
Align
align sets where the columns sit when the row is taller than them.
Gap
gap adds space around the content of the columns.
APIs
Row.Props
| Attribute | Description | Type | Accepted values | Default |
|---|---|---|---|---|
| justify | horizontal alignment of the columns | string | start, end, center, space-around, space-between | start |
| align | vertical alignment of the columns | string | top, middle, bottom | top |
| gap | space around the content of the columns, in theme gaps | number | - | 0 |
| component | the element to render | keyof JSX.IntrinsicElements | 'div', 'ul', 'section', ... | div |
| ... | native props | HTMLAttributes | 'id', 'className', ... | - |
The row does not wrap. If the spans add up to more than 12, the columns get narrower instead of going to the next line. Use a new Row for the next line, or use Grid, which wraps.
Ref
The ref points at the root element.