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.
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.
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.
Setting the the stretch
prop 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.
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.
stretch
prop on the Columns
!Props
aria-describedby?
string;
aria-details?
string;
aria-label?
string;
aria-labelledby?
string;
aria-live?
"off" | "polite" | "assertive";
- '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;
collapseAt?
string;
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.0em
columns
(number | "fit")[]
id?
string;
role?
"region" | (string & {});
region
is used as a role, an aria-label
or aria-labelledby
must be provided.
See MDN.space?
GapSpaceProp;
0
stretch?
boolean;
"false"