Alternatives

Inline — For horizontal layouts, with fluid child widths that may wrap
Flex — For custom layouts

Usage

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

Edit in Playroom

<Columns>
  <Box height={32} background="muted" />
  <Box height={32} background="dim" />
  <Box height={32} background="muted" />
  <Box height={32} background="dim" />
</Columns>

Gap

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

Edit in Playroom

<Columns gap="medium">
  <Box height={32} background="dim" />
  <Box height={32} background="dim" />
  <Box height={32} background="dim" />
  <Box height={32} background="dim" />
</Columns>

Vertical alignment

Items of varying height can be vertically aligned using the alignY prop.

Edit in Playroom

<Stack gap="medium" dividers>
  <Columns gap="small" alignY="top">
    <Box background="dim" padding="small" />
    <Box background="dim" padding="small">
      <Text align="center">top</Text>
    </Box>
    <Box background="dim" padding="small" />
  </Columns>
  <Columns gap="small" alignY="center">
    <Box background="dim" padding="small" />
    <Box background="dim" padding="small">
      <Text align="center">center</Text>
    </Box>
    <Box background="dim" padding="small" />
  </Columns>
  <Columns gap="small" alignY="bottom">
    <Box background="dim" padding="small" />
    <Box background="dim" padding="small">
      <Text align="center">bottom</Text>
    </Box>
    <Box background="dim" padding="small" />
  </Columns>
  <Columns gap="small" alignY="stretch">
    <Box background="dim" padding="small" />
    <Box background="dim" padding="small">
      <Text align="center">stretch</Text>
    </Box>
    <Box background="dim" padding="small" />
  </Columns>
</Stack>

Collapse

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

small
medium
large
xlarge

Resize your browser window to see the columns collapse:

Edit in Playroom

<Columns gap="small" collapse="xlarge">
  <Box height={32} background="muted" />
  <Box height={32} background="dim" />
  <Box height={32} background="muted" />
  <Box height={32} background="dim" />
</Columns>

Template

Define the relative width of each column. You can create a more traditional grid-style column layout, à la Bootstrap:

Edit in Playroom

<Columns gap="small" template={[4, 8, 4]}>
  <Box background="muted" padding="small">
    <Text>sidebar</Text>
  </Box>
  <Box background="dim" padding="small">
    <Text>main</Text>
  </Box>
  <Box background="muted" padding="small">
    <Text>sidebar</Text>
  </Box>
</Columns>