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
Loading...
Variation
Auto
Loading...
AutoGapless
Loading...
Units
Loading...
Responsive Units
spacing, units, and offset are ResponsiveValues
Loading...
Customization
You can use the csx property to handle different styles in both Columns, and Column.
Loading...
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 | 🚫 | - |