The <Columns> and <Column> components can be used to implement page-level designs that align to Currency's responsive grid.
Variants
Default
Responsive
With the collapse prop, the columns will collapse into a vertical stack on mobile viewports. Resize your viewport to see it in action!
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.
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">