• Inline For fine-grained control of spacing and alignment.
  • Tiles For laying out content over many columns and rows.
  • Box For custom layouts.
The spacing between columns can be adjusted using the space prop.
Responsive values are supported, e.g. ['small', 'large'].
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
Columns with content of varying height can be vertically aligned using the alignY prop. Responsive values are supported.
top
center
bottom
When the total width of all the columns is less than the width of the parent container, the columns can be aligned horiontally using the align prop. Responsive values are supported.
left
center
right
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.
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