---
title: Colunas
description: Layout de grade responsivo para exibir Cards, Tiles e outros conteúdos lado a lado, adaptando-se automaticamente ao tamanho da tela.
---
> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.
Columns cria um layout de grade responsivo para exibir elementos de conteúdo lado a lado. A grade se adapta automaticamente a telas menores, empilhando o conteúdo em dispositivos móveis e expandindo-o em computadores.
As capturas de tela mostram a interface em inglês.
Funciona com Cards, Tiles, imagens e componentes personalizados.
## Uso básico
Exiba conteúdo em duas colunas (padrão):
```mdx
```
## Mais colunas
Use `cols={3}` ou `cols={4}` para layouts mais densos:
```mdx
...
```
## Escolher a quantidade de colunas
| Tipo de conteúdo | Colunas recomendadas |
|------------------|----------------------|
| Tiles com imagens | 2-3 |
| Itens com muito texto | 2 |
| Métricas/estatísticas pequenas | 3-4 |
| Comparações de imagens | 2 |
## Comportamento responsivo
Columns se adapta automaticamente ao tamanho da tela:
- **Dispositivos móveis** (< 768px): 1 coluna
- **Tablets** (768px - 1024px): no máximo 2 colunas
- **Computadores** (> 1024px): quantidade total de colunas
## Propriedades
Número de colunas por linha. Aceita valores de 1 a 4.
## Próximos passos?
Veja todos os componentes disponíveis
Saiba como usar componentes em MDX