Columns
What is this?
Columns is a layout component that makes it easy to implement horizontally layouts while defining widths and space between them.
Auto
Columns fits the space with equal widths when the quantity of units aren't specified.
Loading...
Space
Loading...
Units
All columns are of equal width by default, but you can also customise the width of each column individually.
Loading...
Offset
It is possible to define offsets between columns.
Loading...
Responsive Prop
To make it easy applying columns layouts, all props provided by Columns are Responsive Props.
Loading...
Usage
import { Columns, Column } from '@vtex/admin-ui'
function Example() {
return (
<Columns>
<Column>{content}</Column>
<Column>{content}</Column>
<Column>{content}</Column>
</Columns>
)
}
Composition
| Name | Description |
|---|---|
Columns | A 12-column flexbox based columned layout. |
Column | As the name says, it implements a column |
Props
Columns
Extends all the props of div JSX element.
| Name | Type | Description | Required | Default |
|---|---|---|---|---|
| space | ResponsiveProp<CSSPropAutocomplete<SpaceTokens>> | Defines the space between columns | 🚫 | $m |
Column
Extends all the props of div JSX element.
| Name | Type | Description | Required | Default |
|---|---|---|---|---|
| units | ResponsiveProp<number from 1 to 12> | Units of space it takes | 🚫 | 12 |
| offset | ResponsiveProp<'left', 'right', 'both', 'none'> | Columns offset | 🚫 | 'none' |