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

Braid Logo