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.
Three columns of the same size.
justify places the columns when they do not fill the row.
align sets where the columns sit when the row is taller than them.
gap adds space around the content of the columns.
| 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.
The ref points at the root element.