@elemental-ui-alpha/columns

Columns

import { Columns, Column } from '@elemental-ui-alpha/columns';

Parent

Each child of Columns represents a single column. By default that column will span 1 fraction of the total number of children. For variable width columns please see the docs for Child.

<Columns>
  <Box background="shade" height={40} />
  <Box background="dim" height={40} />
  <Box background="shade" height={40} />
  <Box background="dim" height={40} />
</Columns>

Gap

The gap property defines how much space there should be between each element in the stack. Available gap sizes are:

• none (default)
• xsmall
• small
• medium
• large
• xlarge

<Columns gap="small">
  <Box background="shade" padding="small">
    fixed: 1
  </Box>
  <Box background="shade" padding="small">
    fixed: 2
  </Box>
  <Box background="shade" padding="small">
    fixed: 3
  </Box>
</Columns>

When necessary you can provide a size for each breakpoint, using any "falsy" value to omit a given break.

<Columns gap={['xsmall', null, 'medium', 'large', 'xlarge']}>
  <Box background="shade" padding="small">
    responsive: 1
  </Box>
  <Box background="shade" padding="small">
    responsive: 2
  </Box>
  <Box background="shade" padding="small">
    responsive: 3
  </Box>
</Columns>

Collapse

Provide a breakpoint where the columns should collapse and stack on top of one another.

• small
• medium
• large
• xlarge

<Columns gap="small" collapse="xlarge">
  <Box background="shade" padding="xlarge" />
  <Box background="dim" padding="xlarge" />
  <Box background="shade" padding="xlarge" />
</Columns>

Child

Because the column layout uses CSS grid under-the-hood, you're not required to define a Column for each child. You may however find it useful for more dynamic layouts, where each column is not of equal width.

Span & Columns

Use the columns property to explicitly define the number of columns on the parent, and the span property on a given Column child to define how many columns it will take up. You can create a more traditional grid-style column layout, à la Bootstrap:

<Columns gap="small" columns={12}>
  <Column span={8}>
    <Box background="shade" padding="small">
      primary
    </Box>
  </Column>
  <Column span={4}>
    <Box background="shade" padding="small">
      secondary
    </Box>
  </Column>
</Columns>

Or get creative with the responsive props:

<Columns gap="small" columns={12}>
  <Column span={[12, null, 2]}>
    <Box background="shade" padding="small" height={['auto', null, 200]}>
      sidebar
    </Box>
  </Column>
  <Column span={[12, null, 8]}>
    <Box background="shade" padding="small" height={['auto', null, 200]}>
      main
    </Box>
  </Column>
  <Column span={[12, null, 2]}>
    <Box background="shade" padding="small" height={['auto', null, 200]}>
      sidebar
    </Box>
  </Column>
</Columns>