Homecomponentsstructural

Columns

A container that creates columns that could be sized.

Overview

Creates a single row of columns which can be sized. By default, each column shares the available space equally.

Always wrap each column in a Column. Omitting them will result in unknown and unsupported behaviour.

The following examples show the most simple row of columns.

Card 1

Card 2

Card 3

Open in Playroom

Columns is similar to a horizontal Stack and, in some cases, they can be used interchangeably without any difference. However, Columns allows individual Columns to be sized using various keywords as we'll see in the Column Widths section.

Spacing

Use the spacing property to adjust the spacing between the columns. By default, the columns are not spaced. This property accepts responsive values.

Here's an example of two images size-by-size with a $500 spacing:

Anamorphic design from a wrong perspective

Open in Playroom

Column widths

Use the width property to set the width of the columns. You can also set an arbitrary width using a px or rem string value like 120px or 4rem.

Here's a showcase of all the keywords that you can use and how they size.

content

fluid

1/5

fluid

1/4

fluid

1/3

fluid

2/5

fluid

1/2

fluid

3/5

fluid

2/3

fluid

3/4

fluid

4/5

fluid

120px

4rem

1/3

fluid

Open in Playroom

Vertical alignment

Use the alignV property to vertically align the columns. Unlike Stack, the alignment axis doesn't change based on orientation.

Here's an example of icon aligned with a long paragraph.

Unless otherwise indicated, the Site is our proprietary property and all source code, databases, functionality, software, website designs, audio, video, text, photographs, and graphics on the Site (collectively, the "Content") and the trademarks, service marks, and logos contained therein (the "Marks) are owned or controlled by us or licensed to us, and are protected by copyright and trademark laws and various other intellectual property rights and unfair competition laws of the United States, foreign jurisdictions, and international conventions.

Open in Playroom

Horizontal alignment

Use the alignH property to horizontally align the items.

Here's an example of an image with description on the side with the whole container center aligned.

This image is not created by a human, but by an AI by giving it a few instructions.

Open in Playroom

Reversing columns

Use the reverse property to reverse the order of the columns.

Here's an example of two buttons side-by-side with their order reversed. Note that the order is only reversed visually, not in the element tree. For instance, the "Ok" button gets the focus before "Cancel" when using keyboard.

Open in Playroom

Collapsing below a breakpoint

While the default orientation of Columns is horizontal, you can use the collapseBelow property to collapse it, effectively making it a Stack, below any specific breakpoint.

Here's an example of buttons that collapse when their container shrinks below tablet.