@spark-web/columns

title: Columns storybookPath: page-layout-columns--default isExperimentalPackage: false

Use the columns primitive to layout content in configurable columns.

Each child represents a single column. By default that column will span 1 fraction of the total number of children.

<Columns>
  <Placeholder />
  <Placeholder />
  <Placeholder />
</Columns>

Examples

Gap

The spacing between children can be adjusted using the gap prop.

<Columns gap="large">
  <Placeholder />
  <Placeholder />
  <Placeholder />
</Columns>

Vertical alignment

Columns can be aligned vertically using the alignY prop.

<Stack gap="medium" dividers>
  <Columns gap="small" alignY="top">
    <Placeholder />
    <Placeholder label="top (default)" height={64} />
    <Placeholder />
  </Columns>
  <Columns gap="small" alignY="center">
    <Placeholder />
    <Placeholder label="center" height={64} />
    <Placeholder />
  </Columns>
  <Columns gap="small" alignY="bottom">
    <Placeholder />
    <Placeholder label="bottom" height={64} />
    <Placeholder />
  </Columns>
  <Columns gap="small" alignY="stretch">
    <Placeholder />
    <Placeholder label="stretch" height={64} />
    <Placeholder />
  </Columns>
</Stack>

Collapsing across breakpoints

Columns can be collapsed into a single vertical stack responsively using the collapseBelow prop.

<Columns gap="large" collapseBelow="desktop">
  <Placeholder />
  <Placeholder />
  <Placeholder />
</Columns>

Template

If you need more control over how your columns are distributed, you can use the template prop. template receives an array of numbers that represent the relative width of each column.

<Columns gap="small" template={[1, 3, 1]} collapseBelow="tablet">
  <Box border="field" padding="small">
    <Text>nav</Text>
  </Box>
  <Box border="field" padding="small">
    <Text>main</Text>
  </Box>
  <Box border="field" padding="small">
    <Text>aside</Text>
  </Box>
</Columns>

Props

Box props are also included as Column props and are not listed here (excluding display, alignItems, gap, flexDirection, justifyContent and flexWrap).

Extra props are passed into the underlying Box component.