Column

View source on GitHub
See recent changes on GitHub

Use Column to implement a 12-column system.

Figma:
N/A
Responsive:
Ready
Adaptive:
N/A

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
-

The content to be laid out.

Accessibility

Variants

Using the span prop

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

import { Box, Column, Flex, Text } from 'gestalt';

export default function Example() {
  return (
    <Flex
      alignItems="center"
      height="100%"
      justifyContent="center"
      width="100%"
    >
      {Array(12)
        .fill()
        .map((_, i) => (
          <Column key={i} span={1}>
            <Box color="secondary" padding={1}>
              <Box color="default" paddingY={2}>
                <Text align="center">
                  <code>span</code>
                  <br />
                  <code>= 1</code>
                </Text>
              </Box>
            </Box>
          </Column>
        ))}
    </Flex>
  );
}

Three equal columns

import { Box, Column, Flex, Text } from 'gestalt';

export default function Example() {
  return (
    <Flex
      alignItems="center"
      height="100%"
      justifyContent="center"
      width="100%"
    >
      {Array(3)
        .fill()
        .map((_, i) => (
          <Column key={i} span={4}>
            <Box color="secondary" padding={1}>
              <Box color="default" paddingY={2}>
                <Text align="center">
                  <code>span = 4</code>
                </Text>
              </Box>
            </Box>
          </Column>
        ))}
    </Flex>
  );
}

Two equal columns

import { Box, Column, Flex, Text } from 'gestalt';

export default function Example() {
  return (
    <Flex
      alignItems="center"
      height="100%"
      justifyContent="center"
      width="100%"
    >
      {Array(2)
        .fill()
        .map((_, i) => (
          <Column key={i} span={6}>
            <Box color="secondary" padding={1}>
              <Box color="default" paddingY={2}>
                <Text align="center">
                  <code>span = 6</code>
                </Text>
              </Box>
            </Box>
          </Column>
        ))}
    </Flex>
  );
}

Two unequal columns

import { Box, Column, Flex, Text } from 'gestalt';

export default function Example() {
  return (
    <Flex
      alignItems="center"
      height="100%"
      justifyContent="center"
      width="100%"
    >
      <Column span={8}>
        <Box color="secondary" padding={1}>
          <Box color="default" paddingY={2}>
            <Text align="center">
              <code>span = 8</code>
            </Text>
          </Box>
        </Box>
      </Column>
      <Column span={4}>
        <Box color="secondary" padding={1}>
          <Box color="default" paddingY={2}>
            <Text align="center">
              <code>span = 4</code>
            </Text>
          </Box>
        </Box>
      </Column>
    </Flex>
  );
}

Using responsive breakpoints

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.

import { Box, Column, Flex, Text } from 'gestalt';

export default function Example() {
  return (
    <Flex
      alignItems="center"
      height="100%"
      justifyContent="center"
      width="100%"
    >
      <Column mdSpan={6} span={12}>
        <Box color="secondary" padding={1}>
          <Box color="default" paddingY={2}>
            <Box display="block" mdDisplay="none">
              <Text align="center">
                <code>span = 12</code>
              </Text>
            </Box>
            <Box display="none" mdDisplay="block">
              <Text align="center">
                <code>span = 6</code>
              </Text>
            </Box>
          </Box>
        </Box>
      </Column>
      <Column mdSpan={6} span={12}>
        <Box color="secondary" padding={1}>
          <Box color="default" paddingY={2}>
            <Box display="block" mdDisplay="none">
              <Text align="center">
                <code>span = 12</code>
              </Text>
            </Box>
            <Box display="none" mdDisplay="block">
              <Text align="center">
                <code>span = 6</code>
              </Text>
            </Box>
          </Box>
        </Box>
      </Column>
    </Flex>
  );
}

Resizing Columns

import { Box, Column, Flex, Text } from 'gestalt';

export default function Example() {
  return (
    <Flex
      alignItems="center"
      height="100%"
      justifyContent="center"
      width="100%"
    >
      {Array(4)
        .fill()
        .map((_, i) => (
          <Column key={i} mdSpan={3} span={6}>
            <Box color="secondary" padding={1}>
              <Box color="default" paddingY={2}>
                <Box display="block" mdDisplay="none">
                  <Text align="center">
                    <code>span = 6</code>
                  </Text>
                </Box>
                <Box display="none" mdDisplay="block">
                  <Text align="center">
                    <code>span = 3</code>
                  </Text>
                </Box>
              </Box>
            </Box>
          </Column>
        ))}
    </Flex>
  );
}

Equal height columns

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

import { Box, Column, Flex, Text } from 'gestalt';

export default function Example() {
  return (
    <Flex
      alignItems="center"
      height="100%"
      justifyContent="center"
      width="100%"
    >
      <Column span={6}>
        <Box color="dark" 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="tertiary" height="100%" padding={2}>
          <Text color="inverse">Short column</Text>
        </Box>
      </Column>
    </Flex>
  );
}

Gutters

Column gutters can be created through composition and negative margins.

import { Box, Column, Text } from 'gestalt';

export default function Example() {
  return (
    <Box color="dark" height="100%" paddingY={2} width="100%">
      <Box marginBottom={2} paddingX={2}>
        <Text color="inverse">Content</Text>
      </Box>

      <Box
        color="tertiary"
        direction="row"
        display="flex"
        marginEnd={-2}
        marginStart={-2}
        paddingY={12}
        wrap
      >
        <Column span={12}>
          <Box marginBottom={4} paddingX={2}>
            <Text color="inverse">Row</Text>
          </Box>
        </Column>
        <Column span={6}>
          <Box paddingX={2}>
            <Box color="default" padding={4}>
              <Text color="dark">Column A</Text>
            </Box>
          </Box>
        </Column>
        <Column span={6}>
          <Box paddingX={2}>
            <Box color="default" padding={4}>
              <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 responds to changing viewport sizes in web and mobile web.

Flex
Flex is a layout component for flexbox layouts, especially when even spacing between elements is desired (see the gap prop!).

Masonry
Masonry creates a deterministic grid layout, positioning items based on available vertical space. It contains performance optimizations like virtualization and support for infinite scrolling.

Edit page on GitHub