---
title: ColumnView
category: Layout
summary: Place children into different sized columns.
---

```jsx live
const Cell = (props) => (
  <Box
    padding={2}
    radius={3}
    backgroundColor="blue-5"
    color="white"
    {...props}
  />
)
render(
  <ColumnView
    sizes={[{ basis: '280px', grow: 0 }, null, { basis: '100px' }]}
    spacing={2}
  >
    <ColumnView.Column index={0}>
      <Cell minHeight={20}>1</Cell>
    </ColumnView.Column>
    <ColumnView.Column index={0}>
      <Cell minHeight={8}>2</Cell>
    </ColumnView.Column>
    <ColumnView.Column index={1}>
      <Cell minHeight={5}>3</Cell>
    </ColumnView.Column>
    <ColumnView.Column index={1}>
      <Cell minHeight={10}>4</Cell>
    </ColumnView.Column>
    <ColumnView.Column index={2}>
      <Cell minHeight={24}>5</Cell>
    </ColumnView.Column>
  </ColumnView>
)
```