BRAID
Braid Logo
 

Spread

Open in Playroom
Spread is a layout component used to justify content with both an equally distributed and a specified minimum amount of space in between each child.

Alternatives

  • Columns — For fine-grained control of widths, spacing and alignment.
  • Inline — For laying out flowing content that is allowed to wrap.

Direction

By default, children are spread horizontally. Setting the direction prop to vertical will spread children vertically, consuming the full height of its container.
Open in Playroom

Vertical alignment

When spreading content of varying height, vertical alignment can be controlled using the alignY prop. Responsive values are supported.Note: Only applies when spreading horizontally.
top
center
bottom
Open in Playroom

Horizontal alignment

When spreading content of varying widths, horizontal alignment can be controlled using the align prop. Responsive values are supported.Note: Only applies when spreading vertically.
left
center
right
Open in Playroom

Semantic elements

By default, Spread renders a div element. You can customise this via the component prop.
<Spread component="span" space="small">
  <Placeholder height={40} />
  <Placeholder height={40} />
</Spread>
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.
<Spread
  data={{ testid: 'spread-1' }}
  // => data-testid="spread-1"
>
  ...
</Spread>
Open in Playroom