Columns
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.
Import
import { Columns } from '@marigold/components';Props
| Property | Type | Default | Description |
|---|---|---|---|
columns (required) | (number| "fit")[] | none | 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. |
space | ResponsiveStyleValue<string> | none | Space between the columns. |
collapseAt | string | number | 0em | 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. |
stretch | boolean | false | Stretch to height of parent container. |
Examples
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
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.
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.
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.