BRAID
Braid Logo
 

Columns

Open in Playroom
The Columns component is used for laying out content horizontally, with fine-grained control of widths, spacing and alignment.

Alternatives

  • Inline — For laying out flowing content that is allowed to wrap.
  • Spread — For justifying content with equally distributed space in between.
  • 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

Column visibility

Columns can be hidden responsively using the hideBelow and/or hideAbove prop, by specifying the name of the breakpoint, e.g. hideBelow=“tablet”.Consider the three column layout below, applying hideBelow=“tablet” to the second column. Three columns will be shown from the tablet breakpoint upwards, and the second column will be hidden on mobile.
On “tablet” and above
One
Two
Three
Below “tablet”
One
Three
Open in Playroom

Collapsing across breakpoints

Columns can be collapsed into a single vertical stack responsively using the collapseBelow prop and specifying the name of the breakpoint, e.g. collapseBelow=“tablet”.The following results in three columns from the tablet breakpoint upwards, and collapses into a vertical stack on mobile.
On “tablet” and above
Below “tablet”
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.
On “tablet” and above
Second
First
Below “tablet”
First
Second
Open in Playroom

Semantic elements

By default, Columns and Column render a div element. You can customise this via the component prop.
<Columns space="small" component="span">
  <Column>
    <Placeholder height={40} />
  </Column>
  <Column>
    <Placeholder height={40} />
  </Column>
</Columns>
Open in Playroom

Data attributes

Braid components are very explicit about the properties they accept, which makes providing arbitrary data attributes not possible. Instead, a data prop can be provided as a single collection of data attributes.
<Columns
  data={{ testid: 'columns-1' }}
  // => data-testid="columns-1"
  >
  <Column
    data={{ testid: 'column-1' }}
    // => data-testid="column-1"
  >
    ...
  </Column>
</Columns>
Open in Playroom