Column

View source on GitHub

; Opens a new tab

Use Column to implement a 12-column system.

Figma:

Web:

iOS:

Android:

A11y:

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`	-

Accessibility

Accessibility not available

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>

Component quality checklist

Component quality checklist
Quality item	Status	Status description
Figma Library		Component is not currently available in Figma.
Responsive Web	Ready	Component is available in code for web and mobile web.
iOS		Component is not currently available in code for iOS.
Android		Component is not currently available in code for Android.

Edit page on GitHub

; Opens a new tab