Várias colunas CSS

Optional Advanced acabou de cobrir image sprites — uma folha, muitos ladrilhos. Esta sessão é outra ferramenta opcional: várias colunas. Pense num jornal, não numa barra de ferramentas. Pede ao CSS para despejar um artigo longo em dois ou três fluxos verticais. Não está a colocar cartões independentes numa Grid.

Resposta direta

O layout multi-coluna CSS parte um bloco de conteúdo em fluxo — normalmente texto longo — em colunas de jornal. Define quantas (column-count), uma largura confortável (column-width), a calha (column-gap) e um traço vertical opcional (column-rule). Texto, listas e conteúdo em linha enchem a primeira coluna, depois a seguinte. Use para cópia longa. Para navegação, baralhos de cartões e casca da página, fique com Flexbox ou Grid para cada caixa continuar uma unidade inteira.

Porque existem colunas

Linhas muito longas são difíceis de ler. As revistas resolveram isso com várias colunas mais curtas numa página. O CSS copiou a ideia para a web: um elemento, um fluxo de texto, quebra automática em colunas. Isso não é Flexbox (uma fila ou coluna de itens) nem Grid (um mapa bidimensional de áreas). Multi-coluna é uma ferramenta de fragmentação — o navegador pode cortar um parágrafo na fronteira da coluna se não o impedir.

Contagem: «quero três colunas»

column-count pede um número. O navegador divide a largura do contentor por esse número (menos intervalos):

Num artigo largo vê três fluxos. Num telemóvel estreito, três colunas magras ficam ilegíveis — junte uma media query, ou prefira column-width para a contagem descer quando o espaço aperta.

Largura: «cada coluna mais ou menos assim»

column-width é uma pista, não uma gaiola de píxeis. O navegador cria tantas colunas com pelo menos essa largura quantas couberem:

Se a caixa ronda 48rem mais intervalos, pode ver três colunas; se encolher, duas e depois uma. Costuma ser mais calmo do que um column-count: 3 fixo em cada viewport. Pode pôr ambos: a contagem é um máximo, a largura um mínimo confortável. O atalho columns é primeiro largura, depois contagem, por exemplo columns: 16rem 3.

Intervalo e traço

As colunas precisam de ar. column-gap é a calha. column-rule desenha uma linha fina aí (largura, estilo, cor — como uma borda, mas sem ocupar espaço extra de layout como a borda de uma caixa):

Há atalhos parciais (column-rule-width, column-rule-style, column-rule-color). Mantenha o traço discreto; é um divisor de jornal, não um segundo sistema de design.

Um título que atravessa

Um cabeçalho muitas vezes deve ocupar toda a largura, e as colunas começam por baixo. column-span: all num filho faz isso:

No dia a dia usa-se none e all. O span é para título, figura de destaque ou chamada — não para cada parágrafo.

Impedir que as caixas se partam

Um cartão, uma figura com legenda ou uma citação parece partido se a quebra de coluna o cortar ao meio. break-inside: avoid pede ao navegador para manter essa caixa numa coluna quando puder:

Também úteis: break-before / break-after em fluxos tipo impressão, e o antigo page-break-inside: avoid como recurso. Não ganha todas as lutas — caixas muito altas ainda transbordam — mas o objetivo habitual é a legenda ficar com a imagem. column-fill: balance (muitas vezes o valor predefinido) equilibra alturas; auto enche primeiro a primeira coluna (mais como um salto de jornal).

Colunas vs Flex vs Grid

Os módulos Flexbox e Grid já ensinaram colocação de itens. Multi-coluna não dá justify-content nem áreas com nome. Flui um fluxo. Se cada filho deve permanecer um retângulo clicável, use Flex ou Grid.

O cromo da página fica Flex ou Grid

Não transforme o site inteiro em column-count: 3. Cabeçalho, nav e baralho de cartões querem caixas inteiras:

.prose pode ser multi-coluna. .card-deck não deve. Misturar os dois no mesmo elemento corta figuras e deixa botões no fluxo errado.

Ecrãs estreitos e ordem de leitura

Se as colunas ficarem mais finas do que uma linha confortável (cerca de 12–16rem de texto), desça para uma coluna. Leitores de ecrã e teclado seguem a ordem do documento, não «descer uma coluna e depois a seguinte» como varrimento visual — adequado para um artigo, estranho se fingir um dashboard de widgets soltos. Em idiomas RTL as colunas enchem segundo o modo de escrita; o traço continua na calha.

Experimente você

1. Envolva uns parágrafos em .prose com column-count: 2 e um column-gap.
2. Mude para column-width: 16rem e redimensione a janela — veja a contagem mudar.
3. Adicione column-rule: 1px solid num cinza calmo.
4. Ponha um <h2> com column-span: all.
5. Envolva uma figura em break-inside: avoid. Depois o mesmo CSS numa grelha de cartões para ver por que Flex/Grid é mais calmo ali.

Erros comuns

• Usar multi-coluna como galeria de cartões ou layout de página inteira
• Forçar column-count: 3 no telemóvel até cada linha ter três palavras
• Esquecer column-gap e colar os fluxos
• Deixar imagens e legendas partirem-se na fronteira da coluna
• Tratar colunas como Flex: não há flex-grow para um fluxo de colunas
• Confundir com sprites — o sprite recorta um fundo; as colunas fragmentam texto

Resumo

• Multi-coluna despeja um fluxo em colunas de jornal
• column-count é um número; column-width um mínimo confortável; pode combinar
• column-gap e column-rule vestem a calha; títulos com column-span: all
• break-inside: avoid mantém figuras e chamadas inteiras quando possível
• Flex e Grid continuam donos do cromo da página e dos baralhos de cartões
• Optional Advanced segue depois com máscaras (masking)