Column layout

Preview

Two columns

Column 1 content

Column 2 content

Four columns

Column 1

Column 2

Column 3

Column 4

Usage

<cs-column-layout columns="2">
  <div>First column</div>
  <div>Second column</div>
</cs-column-layout>

Properties

__breakpointColumnLayoutBreakpoint

__tag-override'dl'

Overrides the default wrapper HTML tag.

bordersColumnLayoutProps.Borders default: 'none'

Controls whether dividers are placed between rows and columns.

Note: This is not supported when used with minColumnWidth.

columnsnumber default: 1

Specifies the number of columns in each grid row. When minColumnWidth is not set, only up to 4 columns are supported.

disable-guttersboolean default: false

Determines whether the default gutters between columns are removed.

min-column-widthnumber

Use together with columns to specify the desired minimum width for each column in pixels.

The number of columns is determined by the value of this property, the available space, and the maximum number of columns as defined by the columns property.

variantColumnLayoutProps.Variant default: 'default'

Specifies the content type. This determines the spacing of the grid.

Slots

default: The columns to render.