---
title: GridView
category: Layout
summary: Lay out children in columns and rows. Wraps CSS grid styles in a simple API. Any direct children can use the `column|Start|End` or `row|Start|End` [shorthand properties](/system-props#css-grid) to place themselves on the grid. To learn more about how you can use CSS grid visit [learncssgrid.com](https://learncssgrid.com/).
---

```jsx live
const Cell = (props) => (
  <StackView
    alignment="center"
    distribution="center"
    padding={1}
    radius={3}
    backgroundColor="blue-5"
    color="white"
    {...props}
  />
)
render(
  <GridView columns={[12, 32]} minHeight={20} spacing={2}>
    <Cell column={1}>A</Cell>
    <Cell column={2}>B</Cell>
  </GridView>
)
```

```jsx live
const Cell = (props) => (
  <StackView
    alignment="center"
    distribution="center"
    padding={1}
    radius={3}
    backgroundColor="blue-5"
    color="white"
    {...props}
  />
)
render(
  <GridView columns="100px 300px" rows="40px 200px 80px" spacing={2}>
    <Cell columnStart={1} columnEnd={-1} row={1}>
      Header
    </Cell>
    <Cell column={2} row={2}>
      Content
    </Cell>
    <Cell column={1} row={2}>
      Sidebar
    </Cell>
    <Cell columnStart={1} columnEnd={-1} row={3}>
      Footer
    </Cell>
  </GridView>
)
```