BRAID
Braid Logo
 

Columns

Open in Playroom

Alternatives

  • Inline — For fine-grained control of spacing and alignment.
  • Tiles — For laying out content over many columns and rows.
  • Box — For custom layouts.

Spacing

The spacing between columns can be adjusted using the space prop.
Responsive values are supported, e.g. space={{ mobile: 'small', tablet: 'medium', desktop: 'large', wide: 'xlarge' }}
Open in Playroom

Column widths

All columns are of equal width by default, but you can also customise the width of each column individually. Column supports widths fractional widths down to 1/5.
If you want a column to be as small as possible, you can also set its width to content which ensures that it’s only as wide as the content within it.
content
fluid
1/5
fluid
1/4
fluid
1/3
fluid
2/5
fluid
1/2
fluid
3/5
fluid
2/3
fluid
3/4
fluid
4/5
fluid
Open in Playroom

Vertical alignment

Columns with content of varying height can be vertically aligned using the alignY prop. Responsive values are supported.
top
center
bottom
Open in Playroom

Horizontal alignment

When the total width of all the columns is less than the width of the parent container, the columns can be aligned horizontally using the align prop. Responsive values are supported.
left
center
right
Open in Playroom

Collapsing across breakpoints

Columns can be collapsed into a single vertical stack responsively using the collapseBelow prop. The following results in three columns from the tablet breakpoint upwards, but collapse into a vertical stack on mobile.
Open in Playroom

Reversing the column order

By default, columns are rendered in document order, which also doubles as the screen reader order. If you need the columns to be visually reversed, you can provide the reverse prop.
Second
First
Open in Playroom