This library is still in development and is available only for internal usage at VTEX.
Skip to main content

Columns

Version: 0.131.0

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

NameTypeDescriptionRequiredDefault
spacingResponsiveValue<number>Spacing between columns🚫-

Column

NameTypeDescriptionRequiredDefault
unitsResponsiveValue<number from 1 to 12>Units of space it takes🚫-
offsetResponsiveValue<'left', 'right', 'both', 'none'>Columns offset🚫-