Inline

Open in Playroom

Alternatives

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

Spacing

The spacing between children 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

Vertical alignment

Items of varying height can be vertically aligned using the alignY prop. Responsive values are supported.

top

center

bottom

Open in Playroom

Horizontal alignment

Items can be aligned horizontally using the align prop. Responsive values are supported.

left

center

right

Open in Playroom

Collapsing across breakpoints

Items can be collapsed into a single vertical stack responsively using the collapseBelow prop. The following will collapse the list of items into a vertical stack below tablet.

Open in Playroom