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' }}
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.
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.
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.
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.
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.
Reverse is only applied in combination with the collapseBelow prop to ensure the columns are reversed on the same row, but follow the document order when collapsed.
By default, Columns and Column render a div element. You can customise this via the component prop.
Certain components on Columns will change the default element used by Column. E.g. ol and ul will use an li, and span will use a span. However the user provided component prop will take precedence.