Skip to content

The <Columns> and <Column> components can be used to implement page-level designs that align to Currency's responsive grid.

Examples

Default

Column 1

Column 2

Responsive

With the collapse prop, the columns will collapse into a vertical stack on mobile viewports. Resize your viewport to see it in action!

Column 1

Column 2

Change column start

You can change the starting position of a column with the columnStart prop. This can be useful for layouts that call for empty grid columns.

Content

Sidebar

Props

<Columns>

alignY

"bottom" | "center" | "top"

children

Required
ReactNode

collapse

boolean

spacing

ResponsiveProp<0 | 1 | 2 | 3 | 4 | 5 | "0" | "1" | "2" | "3" | "3-half" | "4" | "5">

<Column>

children

Required
ReactNode

columnStart

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "1" | "10" | "11" | "12" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9"

width

Required
ResponsiveProp<1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "1" | "10" | "11" | "12" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9">