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.

Preview

Code

Name

Price

Fee

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.

Preview

Code

Left Sidebar

Main Content

Right Sidebar

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.

Preview

Code

This is the column that takes the available width of the child, as you can see now.

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.

Note

Setting the the stretch prop is usually not necessary since the columns will expand with their children anyway.

Preview

Code

I have a height set to 100%!

I space myself

I have a height set to 200px.

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

Note

You must define a parent for the columns that sets a height. Otherwise setting the height in a column to 100% will not have any effect.

Preview

Code

Toggle stretch

I will grow, if you set stretch prop on the Columns!

Props

Did you know? You can explore, test, and customize props live in Marigold's storybook. Watch the effects they have in real-time!

View Columns stories

aria-describedby?

string;

Identifies the element (or elements) that describes the object.

aria-details?

string;

Identifies the element (or elements) that provide a detailed, extended description for the object.

aria-label?

string;

Defines a string value that labels the current element.

aria-labelledby?

string;

Identifies the element (or elements) that labels the current element.

aria-live?

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

Indicates the level of importance for updates in the live region.

'off': Updates are not announced unless focused.
'polite': Updates are announced when the user is idle.
'assertive': Updates are announced immediately, interrupting other announcements.

children?

ReactNode;

The children of the component.

collapseAt?

string;

Collapse children into a vertical layout at given width. Note that collapseAt is based on the total element width, and not the window width. With a default value of "0" columns will not collapse by default.

Defaults to:

0em

columns

(number | "fit")[]

An array of numbers to set the size of the children. The columns array length and the count of children must be the same. Write "fit" for the column you want to have it fitting the contents width and height.

id?

string;

The element's unique identifier. See MDN.

role?

"region" | (string & {});

Identifies the element a significant section of content for easier navigation. When region is used as a role, an aria-label or aria-labelledby must be provided. See MDN.

space?