Column

Use Column to implement a 12-column system.

Props

Component props
Name	Type	Default
`span` Required	`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12`	-
	The number of units in a 12-unit width that this element will occupy. Also available in responsive sizes: `smSpan`, `mdSpan`, `lgSpan`
`children`	`React.Node`	-

Static columns

Column is a basic layout component to help you size your UI. A full width is composed
of 12 units, each equal to 1/12 of the total width. By setting the span prop you
dictate the percent width an element can occupy.

Example: Basic Column Unit

<Box display="flex" direction="row" paddingY={2}>
  {Array(12).fill().map((_, i) => (
    <Column span={1} key={i}>
      <Box color="lightGray" padding={1}>
        <Box color="white" paddingY={2}>
          <Text align="center">1</Text>
        </Box>
      </Box>
    </Column>
  ))}
</Box>

<Box display="flex" direction="row" paddingY={2}>
  {Array(12).fill().map((_, i) => (
    <Column span={1} key={i}>
      <Box color="lightGray" padding={1}>
        <Box color="white" paddingY={2}>
          <Text align="center">1</Text>
        </Box>
      </Box>
    </Column>
  ))}
</Box>

Example: Three Equal Columns

<Box display="flex" direction="row" paddingY={2}>
  <Column span={4}>
    <Box color="lightGray" padding={1}>
      <Box color="white" paddingY={2}>
        <Text align="center">4</Text>
      </Box>
    </Box>
  </Column>
  <Column span={4}>
    <Box color="lightGray" padding={1}>
      <Box color="white" paddingY={2}>
        <Text align="center">4</Text>
      </Box>
    </Box>
  </Column>
  <Column span={4}>
    <Box color="lightGray" padding={1}>
      <Box color="white" paddingY={2}>
        <Text align="center">4</Text>
      </Box>
    </Box>
  </Column>
</Box>

<Box display="flex" direction="row" paddingY={2}>
  <Column span={4}>
    <Box color="lightGray" padding={1}>
      <Box color="white" paddingY={2}>
        <Text align="center">4</Text>
      </Box>
    </Box>
  </Column>
  <Column span={4}>
    <Box color="lightGray" padding={1}>
      <Box color="white" paddingY={2}>
        <Text align="center">4</Text>
      </Box>
    </Box>
  </Column>
  <Column span={4}>
    <Box color="lightGray" padding={1}>
      <Box color="white" paddingY={2}>
        <Text align="center">4</Text>
      </Box>
    </Box>
  </Column>
</Box>

Example: Two Equal Columns

<Box display="flex" direction="row" paddingY={2}>
  <Column span={6}>
    <Box color="lightGray" padding={1}>
      <Box color="white" paddingY={2}>
        <Text align="center">6</Text>
      </Box>
    </Box>
  </Column>
  <Column span={6}>
    <Box color="lightGray" padding={1}>
      <Box color="white" paddingY={2}>
        <Text align="center">6</Text>
      </Box>
    </Box>
  </Column>
</Box>

<Box display="flex" direction="row" paddingY={2}>
  <Column span={6}>
    <Box color="lightGray" padding={1}>
      <Box color="white" paddingY={2}>
        <Text align="center">6</Text>
      </Box>
    </Box>
  </Column>
  <Column span={6}>
    <Box color="lightGray" padding={1}>
      <Box color="white" paddingY={2}>
        <Text align="center">6</Text>
      </Box>
    </Box>
  </Column>
</Box>

Example: Two Unequal Columns

<Box display="flex" direction="row" paddingY={2}>
  <Column span={8}>
    <Box color="lightGray" padding={1}>
      <Box color="white" paddingY={2}>
        <Text align="center">8</Text>
      </Box>
    </Box>
  </Column>
  <Column span={4}>
    <Box color="lightGray" padding={1}>
      <Box color="white" paddingY={2}>
        <Text align="center">4</Text>
      </Box>
    </Box>
  </Column>
</Box>

<Box display="flex" direction="row" paddingY={2}>
  <Column span={8}>
    <Box color="lightGray" padding={1}>
      <Box color="white" paddingY={2}>
        <Text align="center">8</Text>
      </Box>
    </Box>
  </Column>
  <Column span={4}>
    <Box color="lightGray" padding={1}>
      <Box color="white" paddingY={2}>
        <Text align="center">4</Text>
      </Box>
    </Box>
  </Column>
</Box>

Responsive columns

Column supports setting a span at our 3 responsive breakpoints: sm, md, lg. Each
sets the span of the column from that breakpoint and up. If you don't want your
column to be responsive, only set the span prop.

Example: Stacking Columns

<Box display="flex" direction="row" wrap paddingY={2}>
  <Column span={12} mdSpan={6}>
    <Box color="lightGray" padding={1}>
      <Box color="white" paddingY={2}>
        <Box display="block" mdDisplay="none">
          <Text align="center">12</Text>
        </Box>
        <Box display="none" mdDisplay="block">
          <Text align="center">6</Text>
        </Box>
      </Box>
    </Box>
  </Column>
  <Column span={12} mdSpan={6}>
    <Box color="lightGray" padding={1}>
      <Box color="white" paddingY={2}>
        <Box display="block" mdDisplay="none">
          <Text align="center">12</Text>
        </Box>
        <Box display="none" mdDisplay="block">
          <Text align="center">6</Text>
        </Box>
      </Box>
    </Box>
  </Column>
</Box>

<Box display="flex" direction="row" wrap paddingY={2}>
  <Column span={12} mdSpan={6}>
    <Box color="lightGray" padding={1}>
      <Box color="white" paddingY={2}>
        <Box display="block" mdDisplay="none">
          <Text align="center">12</Text>
        </Box>
        <Box display="none" mdDisplay="block">
          <Text align="center">6</Text>
        </Box>
      </Box>
    </Box>
  </Column>
  <Column span={12} mdSpan={6}>
    <Box color="lightGray" padding={1}>
      <Box color="white" paddingY={2}>
        <Box display="block" mdDisplay="none">
          <Text align="center">12</Text>
        </Box>
        <Box display="none" mdDisplay="block">
          <Text align="center">6</Text>
        </Box>
      </Box>
    </Box>
  </Column>
</Box>

Example: Resizing Columns

<Box display="flex" direction="row" wrap paddingY={2}>
  {Array(4).fill().map((_, i) => (
    <Column span={6} mdSpan={3} key={i}>
      <Box color="lightGray" padding={1}>
        <Box color="white" paddingY={2}>
          <Box display="block" mdDisplay="none">
            <Text align="center">6</Text>
          </Box>
          <Box display="none" mdDisplay="block">
            <Text align="center">3</Text>
          </Box>
        </Box>
      </Box>
    </Column>
  ))}
</Box>

<Box display="flex" direction="row" wrap paddingY={2}>
  {Array(4).fill().map((_, i) => (
    <Column span={6} mdSpan={3} key={i}>
      <Box color="lightGray" padding={1}>
        <Box color="white" paddingY={2}>
          <Box display="block" mdDisplay="none">
            <Text align="center">6</Text>
          </Box>
          <Box display="none" mdDisplay="block">
            <Text align="center">3</Text>
          </Box>
        </Box>
      </Box>
    </Column>
  ))}
</Box>

Example: Equal height columns

Unlike traditional CSS columns, using flex columns makes each column equal height by default.

<Box display="flex" direction="row">
  <Column span={6}>
    <Box color="darkGray" padding={2}>
      <Text color="inverse">Tall column</Text>
      <Box height={200} />
      <Text color="inverse">With lots of content</Text>
    </Box>
  </Column>

  <Column span={6}>
    <Box color="gray" height="100%" padding={2}>
      <Text color="inverse">Short column</Text>
    </Box>
  </Column>
</Box>

<Box display="flex" direction="row">
  <Column span={6}>
    <Box color="darkGray" padding={2}>
      <Text color="inverse">Tall column</Text>
      <Box height={200} />
      <Text color="inverse">With lots of content</Text>
    </Box>
  </Column>

  <Column span={6}>
    <Box color="gray" height="100%" padding={2}>
      <Text color="inverse">Short column</Text>
    </Box>
  </Column>
</Box>

Example: Gutters

Column gutters can be created through composition and negative margins.

<Box paddingY={2} color="darkGray">
  <Box paddingX={2} marginBottom={2}>
    <Text color="inverse">Content</Text>
  </Box>
  <Box
    display="flex"
    direction="row"
    paddingY={2}
    marginStart={-2}
    marginEnd={-2}
    color="gray"
    wrap
  >
    <Column span={12}>
      <Box paddingX={2} marginBottom={2}>
        <Text color="inverse">Row</Text>
      </Box>
    </Column>
    <Column span={6}>
      <Box paddingX={2}>
        <Box color="white"><Text color="dark">Column A</Text></Box>
      </Box>
    </Column>
    <Column span={6}>
      <Box paddingX={2}>
        <Box color="white"><Text color="dark">Column B</Text></Box>
      </Box>
    </Column>
  </Box>
</Box>

<Box paddingY={2} color="darkGray">
  <Box paddingX={2} marginBottom={2}>
    <Text color="inverse">Content</Text>
  </Box>
  <Box
    display="flex"
    direction="row"
    paddingY={2}
    marginStart={-2}
    marginEnd={-2}
    color="gray"
    wrap
  >
    <Column span={12}>
      <Box paddingX={2} marginBottom={2}>
        <Text color="inverse">Row</Text>
      </Box>
    </Column>
    <Column span={6}>
      <Box paddingX={2}>
        <Box color="white"><Text color="dark">Column A</Text></Box>
      </Box>
    </Column>
    <Column span={6}>
      <Box paddingX={2}>
        <Box color="white"><Text color="dark">Column B</Text></Box>
      </Box>
    </Column>
  </Box>
</Box>

Edit page on GitHub