Com apenas algumas regras CSS, você pode criar um layout inspirado na impressão que tenha a flexibilidade da web. É como pegar um jornal, mas à medida que o papel fica menor, as colunas se ajustam e se equilibram automaticamente, permitindo que o conteúdo flua naturalmente.
.intro ( columns: 300px 2; )A columnspropriedade irá aceitar column-count, column-widthou ambas as propriedades.
columns: || ;Usar ambos column-counte column-widthé recomendado para criar um layout flexível com várias colunas. O column-countatuará como o número máximo de colunas, enquanto o column-widthditará a largura mínima para cada coluna. Ao reunir essas propriedades, o layout de várias colunas se dividirá automaticamente em uma única coluna em larguras estreitas do navegador, sem a necessidade de consultas de mídia ou outras regras.
Um layout de várias colunas funciona muito bem em elementos de bloco, incluindo listas para fazer uma navegação flexível.
Para ajustar ainda mais o layout de várias colunas, use break-insideelementos específicos para evitar que fiquem presos entre as colunas.
Mais Informações
- Módulo de layout de múltiplas colunas CSS nível 1 (rascunho de trabalho)
- Documentação MDN
Suporte de navegador
| IE | Beira | Raposa de fogo | cromada | Safári | Ópera |
|---|---|---|---|---|---|
| 10+ | Todo | 9+ | 50+ | Todo | 11,5+ |
| Android Chrome | Android Firefox | Navegador Android | iOS Safari | Opera Mobile |
|---|---|---|---|---|
| Todo | Todo | Todo | Todo | Todo |