Colunas
Layout de grade responsivo para exibir Cards, Tiles e outros conteúdos lado a lado, adaptando-se automaticamente ao tamanho da tela.
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):
<Columns>
<Tile href="/components/tabs" title="Tabs" description="Organize content with tabs">
<img src="/_jd/images/tabs-preview.webp?v=msxgcgs8" alt="Tabs preview" />
</Tile>
<Tile href="/components/tabs" title="Tabs" description="Switch between views">
<img src="/_jd/images/tabs-preview.webp?v=msxgcgs8" alt="Tabs preview" />
</Tile>
</Columns>Mais colunas
Use cols={3} ou cols={4} para layouts mais densos:
<Columns cols={3}>
...
</Columns>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.