Columns
Our design system comes with a set of layout components to help you build common layouts inside your application. Columns implement a 12 column flexbox based responsive column system. By default, each <Column> will have an equal width and you can have up to 12 columns.
To create a basic columned layout, add a <Columns> component and then add your <Column>.
Behavior
ReferenceError: Box is not defined
Variation
Auto
ReferenceError: Box is not defined
AutoGapless
ReferenceError: Box is not defined
Units
ReferenceError: Box is not defined
Responsive Units
spacing, units, and offset are ResponsiveValues
ReferenceError: Box is not defined
Customization
You can use the csx property to handle different styles in both Columns, and Column.
ReferenceError: Box is not defined
Props
Columns
| Name | Type | Description | Required | Default |
|---|---|---|---|---|
| spacing | ResponsiveValue<number> | Spacing between columns | 🚫 | - |
Column
| Name | Type | Description | Required | Default |
|---|---|---|---|---|
| units | ResponsiveValue<number from 1 to 12> | Units of space it takes | 🚫 | - |
| offset | ResponsiveValue<'left', 'right', 'both', 'none'> | Columns offset | 🚫 | - |