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.

6 units

6 units

6 units

Space

6 units

6 units

6 units

Units

All columns are of equal width by default, but you can also customise the width of each column individually.

3 units

6 units

3 units

Offset

It is possible to define offsets between columns.

3 units

3 units

3 units

Responsive Prop

To make it easy applying columns layouts, all props provided by Columns are Responsive Props.

6 units

3 units

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'

• What is this?
• Auto
• Space
• Units
• Offset
• Responsive Prop