Column

A column is one or more vertical blocks of content positioned on a page, separated by gutters.

Columns are incredibly flexible. There are 12 template columns available per row, allowing you to create different combinations of elements that span any number of columns. Column widths are set in percentages so you always have the same relative sizing.

When building grid layouts, all content goes in columns. The hierarchy of grid goes from container to row to column to your content.

Please note that columns should be used in flex containers (preferably rows) in order to work!

To set your column settings you can use one of the following methods:

Pass value as GridNumbers: This value will be used as the columns width. The GridNumbers are:

type GridNumbers =
  | 1 | 2 | 3 | 4 | 5 | 6
  | 7 | 8 | 9 | 10 | 11 | 12;

Pass value as an object with the following interface:
interface IColumnObject {
size?: GridNumbers;
order?: GridNumbers;
offset?: GridNumbers;
}

Auto-width Columns

If you don't provide any width property, we will set the widths automatically using the flex-grow (they will end up having an equal width).

1 of 2

2 of 2

1 of 3

2 of 3

3 of 3

Columns With Different Widths

Column(8)

Column(4)

Column(12)

Column(auto)

Column Wrapping

If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

Column(9)

Column(4)

Column(6)

Column Reordering

First element with no order applied

Second element with a larger order

Third element with a smaller order

Column Offsetting

Column(4)

Column(4) / Offset(4)

Column(6) / Offset(3)

API

Learn more about the properties and the customization points.

Usage

import Column from "@sonnat/ui/Column";

//or
import { Column } from "@sonnat/ui";

Properties

Note that the documentation avoids mentioning all the native props (there are a lot) in this section of the components.

Column Properties
Name	Type	Default	Description
children	node	-	The content of the column.
className	string	-	Append to the class names applied to the component so you can override or extend the styles.
all	number \| object	-	Defines the number of grids the component is going to use. It's applied for the all breakpoints if not overridden.
xxs	number \| object	-	Defines the number of grids the component is going to use. It's applied for the `xxs` breakpoints if not overridden.
xs	number \| object	-	Defines the number of grids the component is going to use. It's applied for the `xs` breakpoints if not overridden.
sm	number \| object	-	Defines the number of grids the component is going to use. It's applied for the `sm` breakpoints if not overridden.
md	number \| object	-	Defines the number of grids the component is going to use. It's applied for the `md` breakpoints if not overridden.
lg	number \| object	-	Defines the number of grids the component is going to use. It's applied for the `lg` breakpoints if not overridden.
xlg	number \| object	-	Defines the number of grids the component is going to use. It's applied for the `xlg` breakpoints if not overridden.
The `ref` is forwarded to the root element. Any other properties supplied will be provided to the root element.