Gerador de várias colunas CSS

O que é o layout multicoluna CSS

O módulo CSS Multi-column Layout (a especificação W3C «CSS Multi-column Layout Module Level 1») redistribui automaticamente o conteúdo de um único elemento por duas ou mais colunas, do mesmo modo que a impressão de jornais e revistas trata textos longos há séculos. Você declara quantas colunas quer (ou a largura desejada de cada coluna) e o navegador distribui o conteúdo de cima para baixo, da esquerda para a direita, equilibrando o número de linhas para que cada coluna termine aproximadamente na mesma altura. O módulo tornou-se Candidate Recommendation do W3C em abril de 2011 e chegou de forma utilizável aos navegadores entre Firefox 3.5 (junho de 2009) e IE 10 (outubro de 2012). É um recurso básico da plataforma web há mais de uma década. Diferente de Flexbox ou Grid (que alinham elementos filhos discretos em posições conhecidas) o layout multicoluna trata o conteúdo como um fluxo contínuo único que o navegador secciona em colunas conforme a altura disponível.

Quando colunas CSS são a ferramenta certa

• Texto longo em telas amplas. Ler texto numa única coluna com mais de cerca de 75 caracteres cansa os olhos, o olhar precisa percorrer distância demais para encontrar o início da próxima linha. O layout em duas colunas reduz pela metade o comprimento da linha usando o mesmo espaço vertical e melhora drasticamente a legibilidade em telas largas.
• Listas de definições e glossários. Longas listas alfabéticas de itens curtos se distribuem naturalmente em várias colunas sem precisar de equilíbrio manual.
• Listas de links no rodapé. O clássico rodapé «mapa do site» com dezenas de links (categorias para baixo, links na horizontal) encaixa perfeitamente em column-count.
• Listas de funcionalidades e enumerações. Uma lista longa que rolaria infinitamente numa só coluna lê-se muito melhor em duas ou três.
• Folhas de estilo para impressão. O layout multicoluna é um dos poucos recursos CSS que se traduz lindamente para o papel, o formato que jornais usam desde sua invenção.

column-count vs column-width, a distinção mais importante

Duas formas de especificar colunas, e a escolha importa para design responsivo. column-count: 3 codifica três colunas fixas, em qualquer largura de viewport, o navegador produz exatamente três colunas, que ficam mais estreitas à medida que o contêiner encolhe. Num celular, três colunas viram fatias finas ilegíveis. column-width: 250px pede em vez disso colunas «de pelo menos 250 pixels de largura»; o navegador calcula quantas cabem no contêiner e reorganiza automaticamente quando a viewport muda. Telas largas recebem muitas colunas, telas estreitas poucas ou uma, sem uma única media query. O padrão combinado é a melhor prática moderna: columns: 250px 4 (atalho de column-width mais column-count) significa «colunas de 250 px de largura, mas nunca mais de 4». O navegador produz 4 colunas num desktop largo, menos num tablet, uma só num celular, responsivo automático. A maior parte do CSS de produção usa essa forma combinada pela robustez.

Controlar onde o conteúdo quebra

Por padrão o navegador quebra colunas onde calhar, o que às vezes separa um cabeçalho do seu primeiro parágrafo, ou parte um cartão ao meio. A propriedade CSS break-inside: avoid (CSS Fragmentation Module Level 3) diz ao navegador «não divida este elemento entre colunas», tipicamente aplicada a cartões, figuras e qualquer conteúdo que deva ficar junto. break-before: column força uma quebra de coluna antes de um elemento, útil para «comece cada seção numa nova coluna». column-span: all faz com que um cabeçalho ou destaque se estenda por toda a largura através de todas as colunas, saindo do fluxo de colunas, típico para o título do artigo acima de um corpo multicoluna.

Armadilhas a observar

O layout multicoluna tem interações sutis que vale a pena conhecer. A ordem de leitura em leitores de tela segue a ordem do DOM, que geralmente coincide com a ordem visual de topo-para-base das colunas, mas tecnologia assistiva pode ocasionalmente se confundir em layouts complexos. A paginação na impressão com multicoluna pode produzir equilíbrios estranhos entre quebras de página; teste com folha de estilo de impressão se a saída em papel importa. Conteúdo longo enche para baixo: se você der a um contêiner multicoluna uma altura fixa menor do que o conteúdo precisa, ele transborda; se não restringir a altura, o navegador equilibra as colunas para alturas aproximadamente iguais. Conteúdo ancorado (formulários, elementos interativos que precisam ficar num lugar) funciona mal em colunas porque o usuário não sabe onde olhar. Misturar com Grid ou Flexbox no mesmo nível produz resultados imprevisíveis, escolha um método de layout por contêiner.

Propriedades CSS geradas

• column-count: número explícito de colunas (fixo, não se adapta ao viewport)
• column-width: largura mínima de coluna (o navegador calcula quantas cabem, totalmente responsivo)
• column-gap: espaço horizontal entre colunas; o padrão de 1em geralmente serve
• column-rule: linha vertical decorativa entre colunas (largura, estilo, cor, como uma borda)
• column-span: all: aplicado a um cabeçalho ou destaque para abranger toda a largura através de todas as colunas