Columns

The <Columns> component is used to create structured and flexible layouts that organize content efficiently. It is a responsive component with sized columns in one row based on a flex system.

Usage

With the <Columns> component you specify the numbers of columns to get a layout with evenly distributed column cells. The columns property defines the width of the children. This is written as array, whose length and the count of children must be the same.

The <Columns> component is ideal for arranging content in a line. This can be for example if you have a table-like structure.

In this example the columns are filled with interactive elements. This is a good use case for a column component. Unlike as in <Table> you can use the interactive elements without loosing the accessibility features of the components.

Page layout

With <Columns> you also have the possibility to create a whole, responsive page layout. This can be helpful if you anyway need to have certain parts of the application.

Fixed widths

Sometimes you need to set an element at the start or at the end of a column. You can use the fit value for the columns property to align it to the chosen position. The column width will be always fitting the content. While the other values take the width content based according to the space still available.

You can also add space between the columns and set a collapseAt prop to collapse the columns at a certain width. This is convenient for a good responsivness.

Stretch to height of parent

By using the stretch prop you can make the container to take full height.

Here is another interactive example on how to use the stretch prop.

Props

string;

string;

string;

string;

"off" | "polite" | "assertive";

ReactNode;

string;

0em

(number | "fit")[]

string;

"region" | (string & {});

GapSpaceProp;

0

boolean;

"false"

Related