---
title: TileView
category: Layout
summary: Auto place children into a grid and let the browser handle columns responsively, showing fewer columns on smaller viewports, and more columns as the viewport increases.
---

```jsx live
render(
  <TileView minCellWidth={30} spacing={2}>
    {[0, 1, 2, 3, 4, 5, 6, 7, 8].map((index) => (
      <StackView
        key={index}
        padding={1}
        radius={3}
        backgroundColor="blue-5"
        color="white"
      >
        Cell {index}
      </StackView>
    ))}
  </TileView>
)
```

```jsx live
render(
  <ColumnView sizes={[30, 'auto']} spacing={2}>
    <ColumnView.Column>
      <StackView
        height="100%"
        padding={1}
        radius={3}
        backgroundColor="backgroundSecondary"
      >
        Sidebar
      </StackView>
    </ColumnView.Column>
    <ColumnView.Column>
      <TileView minCellWidth={10} spacing={2}>
        {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((index) => (
          <StackView
            key={index}
            padding={1}
            radius={3}
            backgroundColor="blue-5"
            color="white"
          >
            Cell {index}
          </StackView>
        ))}
      </TileView>
    </ColumnView.Column>
  </ColumnView>
)
```