Columns

Columns is a layout component that helps you organize your content horizontally into columns with consistent spacing between them. By default, all columns have the same width, but you can modify the width of each column based on your preference. You can even assign fractional flex values up to 1/5 to a column for more precise layout control.

Flex

<Stack space={2}>
  <Columns space={2}>
    <Column flex="1/2">
      <Placeholder label="1/2" />
    </Column>
    <Column flex="1/2">
      <Placeholder label="1/2" />
    </Column>
  </Columns>
  <Columns space={2}>
    <Column flex="1/3">
      <Placeholder label="1/3" />
    </Column>
    <Column flex="1/3">
      <Placeholder label="1/3" />
    </Column>
    <Column flex="1/3">
      <Placeholder label="1/3" />
    </Column>
  </Columns>
  <Columns space={2}>
    <Column flex="2/3">
      <Placeholder label="2/3" />
    </Column>
    <Column flex="1/3">
      <Placeholder label="1/3" />
    </Column>
  </Columns>
  <Columns space={2}>
    <Column flex="1/4">
      <Placeholder label="1/4" />
    </Column>
    <Column flex="1/4">
      <Placeholder label="1/4" />
    </Column>
    <Column flex="1/4">
      <Placeholder label="1/4" />
    </Column>
    <Column flex="1/4">
      <Placeholder label="1/4" />
    </Column>
  </Columns>
  <Columns space={2}>
    <Column flex="1/4">
      <Placeholder label="1/4" />
    </Column>
    <Column flex="1/2">
      <Placeholder label="1/2" />
    </Column>
    <Column flex="1/4">
      <Placeholder label="1/4" />
    </Column>
  </Columns>
  <Columns space={2}>
    <Column flex="1/4">
      <Placeholder label="1/4" />
    </Column>
    <Column flex="3/4">
      <Placeholder label="3/4" />
    </Column>
  </Columns>
  <Columns space={2}>
    <Column flex="1/5">
      <Placeholder label="1/5" />
    </Column>
    <Column flex="2/5">
      <Placeholder label="2/5" />
    </Column>
    <Column flex="2/5">
      <Placeholder label="2/5" />
    </Column>
  </Columns>
  <Columns space={2}>
    <Column flex="1/5">
      <Placeholder label="1/5" />
    </Column>
    <Column flex="3/5">
      <Placeholder label="3/5" />
    </Column>
    <Column flex="1/5">
      <Placeholder label="1/5" />
    </Column>
  </Columns>
  <Columns space={2}>
    <Column flex="1/5">
      <Placeholder label="1/5" />
    </Column>
    <Column flex="4/5">
      <Placeholder label="4/5" />
    </Column>
  </Columns>
</Stack>

Expand code

If you want a column to be as small as possible, you can set its flex value to content. This ensures the column takes up the least amount of space necessary to display its content.

The alignY prop allows you to vertically align columns with varying content heights.

AlignY

<Stack space={4}>
  <Columns space={2} alignY="top">
    <Placeholder height={60} label="1" />
    <Placeholder height={160} label="2" />
    <Placeholder height={120} label="3" />
    <Placeholder height={80} label="4" />
  </Columns>
  <Columns space={2} alignY="center">
    <Placeholder height={80} label="1" />
    <Placeholder height={120} label="2" />
    <Placeholder height={160} label="3" />
    <Placeholder height={60} label="4" />
  </Columns>
  <Columns space={2} alignY="bottom">
    <Placeholder height={60} label="1" />
    <Placeholder height={160} label="2" />
    <Placeholder height={120} label="3" />
    <Placeholder height={80} label="4" />
  </Columns>
</Stack>

Expand code

You can use the alignX prop to horizontally align the columns when the total width of all columns is less than the width of the parent container.

AlignX

<Stack space={4}>
  <Columns space={2} defaultFlex="content" alignX="left">
    <Placeholder width={50} label="1" />
    <Placeholder width={50} label="2" />
    <Placeholder width={50} label="3" />
  </Columns>
  <Columns space={2} defaultFlex="content" alignX="center">
    <Placeholder width={50} label="1" />
    <Placeholder width={50} label="2" />
    <Placeholder width={50} label="3" />
  </Columns>
  <Columns space={2} defaultFlex="content" alignX="right">
    <Placeholder width={50} label="1" />
    <Placeholder width={50} label="2" />
    <Placeholder width={50} label="3" />
  </Columns>
  <Columns space={2} defaultFlex="content" alignX="between">
    <Placeholder width={50} label="1" />
    <Placeholder width={50} label="2" />
    <Placeholder width={50} label="3" />
  </Columns>
  <Columns space={2} defaultFlex="content" alignX="around">
    <Placeholder width={50} label="1" />
    <Placeholder width={50} label="2" />
    <Placeholder width={50} label="3" />
  </Columns>
  <Columns space={2} defaultFlex="content" alignX="evenly">
    <Placeholder width={50} label="1" />
    <Placeholder width={50} label="2" />
    <Placeholder width={50} label="3" />
  </Columns>
</Stack>

Expand code

The reverse prop allows you to reverse the order of the columns if you need to display them in a different order.

Reverse

<Columns space={2} reverse={true}>
  <Column flex="1/4">
    <Placeholder label="1" />
  </Column>
  <Placeholder label="2" />
  <Column flex="1/4">
    <Placeholder label="3" />
  </Column>
</Columns>

If you want to stack the columns vertically on smaller screens, you can use the collapseBelow prop.

Custom Column component

To include a custom component within Columns, you should utilize the Column.from method. This method enables you to create a new Column instance from a custom component and use it in your Columns layout. Following this approach, you can ensure your custom component is correctly integrated and behaves as expected.

const Content = Column.from<Props>(props => {
  return <Box {...props} />;
});

Props

The Columns component is created using the Box component. It extends all the props* supported by Box, as well as React Native View (opens in a new tab), and the props mentioned below.

Unavailable Box props: gap, rowGap, columnGap

defaultFlex

Default value

fluid

Type

ResponsiveProp<Flex>

Assigns a default flex value to each column.

space

Type

ResponsiveProp<number>

Sets the space between children.

alignX

Type

ResponsiveProp<AxisX | Space>

Aligns children horizontally.

alignY

Type

ResponsiveProp<AxisY>

Aligns children vertically.

collapseBelow

Type

Breakpoint

Stacks the columns vertically when the current breakpoint is smaller than the provided breakpoint.

Bleed FloatBox