Component with sized columns in one row.

The <Columns> is a responsive layout component, with sized columns in one row. With the <Columns> component you can set an array of numbers the size of the children. The columns array length and the count of children must be the same. You can add space between the columns und set a collapseAt prop to collapse the columns at a certain width.



To import the component you just have to use this code below.

import { Columns } from '@marigold/components';


columns (required)(number| "fit")[]noneAn 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.
spaceResponsiveStyleValue<string>noneSpace between the columns.
collapseAtstring | number0emCollapse 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.
stretchbooleanfalseStretch to height of parent container.


Columns and a space between them

The example shows how to use the space prop. It defines the gap between the contents.

Columns collapsing at a certain width

The example show how the collapseAt prop is to use. If you resize the window of your browser you can see that the columns are collapsing or expanding. Please note that the collapsing or expanding starting in a small range of the collapseAt value.

Page layout

Create a page layout with three columns and collapse or expanding at 25em

Left Sidebar
Main Content
Right Sidebar

Stretch to Height of Parent

By using the stretch prop you can make the container to take full width. Note that this is usually not necessary since the columns will expand with their children anyway.

I have a height set to 100%!
I space myself
I have a height set to 200px.
Columns will stretch if they get longer, like a regular CSS element.
I am here too!

Here is another interactive example on how to use the stretch prop. Note that there has to be a parent of the columns that sets a height. Otherwhise setting the height in a column to 100% will not have any effect.

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

Column with fitting width

In this example the fit option is set to the columns property. The column width will be always fitting the content.