Columns

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

Open in Playroom

<Columns>
  <Column width="6">
    <Placeholder label="Column 1" height="100px" />
  </Column>
  <Column width="6">
    <Placeholder label="Column 2" height="100px" />
  </Column>
</Columns>

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

Open in Playroom

<Columns collapse>
  <Column width="6">
    <Placeholder label="Column 1" height="100px" />
  </Column>
  <Column width="6">
    <Placeholder label="Column 2" height="100px" />
  </Column>
</Columns>

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

Open in Playroom

<Columns collapse>
  <Column width="7">
    <Placeholder label="Content" height="100px" />
  </Column>
  <Column width="4" columnStart="9">
    <Placeholder label="Sidebar" height="100px" />
  </Column>
</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">