Quando e como usar o layout multi-coluna CSS

Publicados: 2022-03-10
Resumo rápido ↬ A especificação de layout de várias colunas é muitas vezes negligenciada quando usamos Grid e Flexbox. Neste artigo, Rachel Andrew explica por que é diferente de outros métodos de layout e mostra alguns padrões e sites úteis que o mostram bem.

Em todo o entusiasmo sobre CSS Grid Layout e Flexbox, outro método de layout é muitas vezes esquecido. Neste artigo, vou dar uma olhada no Layout de várias colunas — geralmente chamado de multicol ou, às vezes, de “Colunas CSS”. Você descobrirá para quais tarefas ele é adequado e algumas das coisas a serem observadas ao criar colunas.

O que é Multicol?

A ideia básica do multicol é que você pode pegar um pedaço de conteúdo e distribuí-lo em várias colunas, como em um jornal. Você faz isso usando uma das duas propriedades. A propriedade column-count especifica o número de colunas nas quais você deseja que o conteúdo seja dividido. A propriedade column-width especifica a largura ideal, deixando o navegador descobrir quantas colunas caberão.

Não importa quais elementos estão dentro do conteúdo que você transforma em um container multicol, tudo permanece em fluxo normal, mas dividido em colunas. Isso torna o multicol diferente de outros métodos de layout que temos nos navegadores hoje. Flexbox e Grid, por exemplo, pegam os elementos filho do container e esses itens então participam de um layout flex ou grid. Com multicol, você ainda tem fluxo normal, exceto dentro de uma coluna.

No exemplo abaixo estou usando column-width , para exibir colunas de pelo menos 14em . Multicol atribui 14em colunas de 14 em caber e, em seguida, divide o espaço restante entre as colunas. As colunas terão pelo menos 14em , a menos que possamos exibir apenas uma coluna, caso em que ela pode ser menor. Multicol foi a primeira vez que vimos esse tipo de comportamento em CSS, criando colunas que eram essencialmente responsivas por padrão. Você não precisa adicionar consultas de mídia e alterar o número de colunas para vários pontos de interrupção, em vez disso, especificamos uma largura ideal e o navegador resolverá isso.

Veja o Pen Smashing Multicol: column-width por Rachel Andrew (@rachelandrew) no CodePen.

Veja o Pen Smashing Multicol: column-width por Rachel Andrew (@rachelandrew) no CodePen.
Mais depois do salto! Continue lendo abaixo ↓

Colunas de estilo

As caixas de coluna criadas quando você usa uma das propriedades de coluna não podem ser segmentadas. Você não pode abordá-los com JavaScript, nem pode estilizar uma caixa individual para dar uma cor de fundo ou ajustar o preenchimento e as margens. Todas as caixas de coluna serão do mesmo tamanho. A única coisa que você pode fazer é adicionar uma regra entre as colunas, usando a propriedade column-rule, que funciona como border. Você também pode controlar o intervalo entre as colunas usando a propriedade column-gap , que tem um valor padrão de 1em , mas você pode alterá-lo para qualquer unidade de comprimento válida.

Veja o Pen Smashing Multicol: estilo de coluna de Rachel Andrew (@rachelandrew) no CodePen.

Veja o Pen Smashing Multicol: estilo de coluna de Rachel Andrew (@rachelandrew) no CodePen.

Essa é a funcionalidade básica do multicol. Você pode pegar um pedaço de conteúdo e dividi-lo em colunas. O conteúdo preencherá as colunas por sua vez, criando colunas na direção em linha. Você pode controlar os intervalos entre as colunas e adicionar uma regra, com os mesmos valores possíveis da borda. Até agora tudo bem, e todos os itens acima são muito bem suportados em navegadores e há muito tempo, tornando essa especificação muito segura de usar em termos de compatibilidade com versões anteriores.

Há algumas outras coisas que você pode querer considerar com suas colunas e alguns problemas potenciais a serem observados ao usar colunas na web.

Colunas de abrangência

Às vezes, você pode querer dividir algum conteúdo em colunas, mas depois fazer com que um elemento se estenda pelas caixas de coluna. Aplicando a propriedade column-span a um descendente do contêiner multicol consegue isso.

No exemplo abaixo, fiz com que um elemento <blockquote> se estendesse pelas minhas colunas. Observe que, ao fazer isso, o conteúdo é dividido em um conjunto de caixas acima do intervalo e, em seguida, inicia um novo conjunto de caixas de coluna abaixo. O conteúdo não salta pelo elemento estendido.

A propriedade column-span está sendo implementada no Firefox e está por trás de um sinalizador de recurso.

Veja o Pen Smashing Multicol: column-span por Rachel Andrew (@rachelandrew) no CodePen.

Veja o Pen Smashing Multicol: column-span por Rachel Andrew (@rachelandrew) no CodePen.

Esteja ciente de que na especificação atual, os valores para column-span são all ou none . Você não pode abranger apenas algumas das colunas, mas pode obter o tipo de layout que pode ver em um jornal combinando multicol com outros métodos de layout. Neste próximo exemplo, tenho um contêiner de grade com duas faixas de coluna. A pista da esquerda é 2fr , a pista da direita 1fr . O artigo na trilha da esquerda eu transformei em um container multicol com duas trilhas, ele também tem um elemento de abrangência.

À direita, temos um aparte que vai para a segunda trilha da coluna Grid. Ao brincar com os vários métodos de layout disponíveis para nós, podemos descobrir exatamente qual método de layout se adapta ao trabalho em questão - não tenha medo de misturar e combinar!

Veja o Pen Smashing Multicol: misturando métodos de layout por Rachel Andrew (@rachelandrew) no CodePen.

Veja o Pen Smashing Multicol: misturando métodos de layout por Rachel Andrew (@rachelandrew) no CodePen.

Controlando quebras de conteúdo

Se você tiver conteúdo contendo títulos, provavelmente desejará evitar a situação em que um título acaba como a última coisa em uma coluna com o conteúdo indo para a próxima coluna. Se você tiver imagens com legendas, a situação ideal seria que a imagem e a legenda permanecessem como uma unidade, não sendo divididas em colunas. Para lidar com esses problemas, o CSS possui propriedades para controlar onde o conteúdo é interrompido.

Ao dividir seu conteúdo em colunas, você executa o que é conhecido como fragmentação. O mesmo acontece se você dividir seu conteúdo entre páginas, como quando você cria uma folha de estilo para um contexto de impressão. Portanto, multicol está mais próximo da mídia paginada do que de outros métodos de layout na web. Por causa disso, por vários anos a maneira de controlar quebras no conteúdo tem sido usar as propriedades page-break- que faziam parte do CSS2.1.

  • page-break-before
  • page-break-after
  • page-break-inside

Mais recentemente, a especificação CSS Fragmentation definiu propriedades para fragmentação que são projetadas para qualquer contexto fragmentado, a especificação inclui detalhes para mídia paginada, multicol e a especificação de regiões paralisadas; As regiões também fragmentam um conteúdo contínuo. Ao tornar essas propriedades genéricas, elas podem ser aplicadas a qualquer contexto fragmentado futuro, da mesma forma que as propriedades de alinhamento do Flexbox foram movidas para a especificação Box Alignment para que pudessem ser usadas no layout de Grade e Bloco.

  • break-before
  • break-after
  • break-inside

Como exemplo, usei break-inside avoid no elemento <figure> , para evitar que a legenda seja separada da imagem. Um navegador de suporte deve manter a figura unida, mesmo que isso faça com que as colunas pareçam desequilibradas.

Veja o Pen Smashing Multicol: break-inside por Rachel Andrew (@rachelandrew) no CodePen.

Veja o Pen Smashing Multicol: break-inside por Rachel Andrew (@rachelandrew) no CodePen.

Infelizmente, o suporte para essas propriedades em multicol é bastante irregular. Mesmo quando suportados, eles devem ser vistos como uma sugestão devido ao fato de que seria possível fazer tantas solicitações ao tentar controlar a quebra, que essencialmente o navegador não pode quebrar em nenhum lugar. A especificação define prioridades neste caso, no entanto, provavelmente é mais útil para você controlar apenas os casos mais importantes.

O problema das colunas na web

Uma razão pela qual não vemos muito uso de multicol na web é o fato de que seria muito fácil acabar com uma experiência de leitura que fizesse o leitor rolar na dimensão do bloco. Isso significaria rolar para cima e para baixo verticalmente para aqueles que usam inglês ou outro modo de escrita vertical. Esta não é uma boa experiência de leitura!

Se você corrigir a altura do contêiner, por exemplo, usando a unidade de viewport vh , e houver muito conteúdo, o estouro ocorrerá na direção inline e, em vez disso, você obterá uma barra de rolagem horizontal.

Veja as colunas Pen Smashing Multicol: overflow por Rachel Andrew (@rachelandrew) no CodePen.

Veja as colunas Pen Smashing Multicol: overflow por Rachel Andrew (@rachelandrew) no CodePen.

Nenhuma dessas coisas é ideal, e fazer uso de multicol na web é algo que precisamos pensar com muito cuidado em termos da quantidade de conteúdo que podemos ter como objetivo fluir para nossas colunas.

Colunas de estouro de bloco

Para o Nível 2 da especificação, estamos considerando como habilitar um método pelo qual colunas de estouro, aquelas que atualmente acabam causando a barra de rolagem horizontal, poderiam ser criadas na direção do bloco. Isso significaria que você poderia ter um contêiner multicol com uma altura e, uma vez que o conteúdo tivesse feito colunas que preenchiam esse contêiner, um novo conjunto de colunas seria criado abaixo. Isso se pareceria um pouco com o nosso exemplo de extensão acima, porém, em vez de ter uma chave inglesa fazendo com que as novas caixas de coluna iniciassem, seria o estouro causado por um contêiner com restrição na dimensão do bloco.

Esse recurso tornaria o multicol muito mais útil para a web. Enquanto estamos um pouco distantes agora, você pode ficar de olho no problema no repositório do CSS Working Group. Se você tiver casos de uso adicionais para esse recurso, publique-os, isso pode realmente ajudar ao projetar o novo recurso.

O que é Multicol útil para hoje?

Com a especificação atual, não é aconselhável dividir todo o seu conteúdo em colunas sem considerar os problemas de rolagem. No entanto, existem alguns casos em que o multicol é ideal na web. Existem casos de uso suficientes para torná-lo algo que você deve considerar ao analisar padrões de design.

Recolher pequena interface do usuário ou elementos de texto

Multicol pode ser útil em qualquer lugar onde você tenha uma pequena lista de itens que você deseja que ocupem menos espaço. Por exemplo, uma lista simples de caixas de seleção ou uma lista de nomes. Muitas vezes, nesses cenários, o visitante não está lendo uma coluna e depois voltando para o início da próxima, mas verificando o conteúdo em busca de uma caixa de seleção para clicar ou um item para selecionar. Mesmo se você criar uma experiência rolada, isso pode não ser um problema.

Você pode ver um exemplo de multicol usado dessa maneira por Sander de Jong no site do DonarMuseum.

Os nomes são organizados em várias colunas no site do DonarMuseum
No DonarMuseum, podemos ver o multicol usado para exibir listas de nomes. (Fonte da imagem) (Visualização grande)

Pequenas quantidades de conteúdo conhecidas

Há momentos em que projetamos um site em que sabemos que algum conteúdo é relativamente pequeno e caberá na maioria das telas sem causar rolagem indesejada. Eu usei multicol nas páginas de apresentação do Notist, para a introdução de uma palestra.

Andy Clarke projetou um belo exemplo para o site da Equfund.

Um layout de duas colunas, incluindo vários conteúdos
No site da Equfund, você pode ver como diferentes elementos HTML permanecem em fluxo normal enquanto são exibidos dentro de colunas. (Fonte da imagem) (Visualização grande)

Para evitar a possibilidade de telas muito pequenas causarem rolagem, lembre-se de que você pode usar consultas de mídia para verificar a altura e a largura (ou em um mundo lógico, bloco e inline). Se você habilitar apenas colunas em um ponto de interrupção que tenha uma min-height mínima grande o suficiente para seu conteúdo, isso pode evitar que usuários de dispositivos muito pequenos tenham uma experiência de rolagem ruim.

Exibição de Conteúdo Semelhante à Maçonaria

Outro lugar onde o layout de várias colunas funciona muito bem é se você deseja criar um tipo de exibição de conteúdo do tipo Maçonaria. Multicol é o único método de layout que atualmente criará esse tipo de layout com itens de altura desigual. A grade deixaria uma lacuna ou esticaria os itens para criar uma grade bidimensional estrita.

Veerle Pieters tem um belo exemplo de uso de multicol dessa maneira em sua página de inspiração.

Um arranjo de várias caixas em colunas projetadas por Veerle Pieters
Neste projeto de Veerle Pieters, multicol é usado para layout de várias caixas ou cartões como colunas. (Visualização grande)

Fallbacks de grade e Flexbox

As propriedades da column- também podem ser usadas como um substituto para o layout Grid e Flex. Se você especificar uma das propriedades em um contêiner, transforme esse contêiner em um layout Flex ou Grid usando display: flex ou display: grid , qualquer comportamento de coluna será removido. Se você tiver, por exemplo, um layout de cartões que usa Layout de Grade e o layout seria legível se fosse executado em colunas em vez de na página, você poderia usar multicol como um substituto simples. Os navegadores que não suportam Grid terão o display multicol, aqueles que suportam Grid terão o Grid Layout.

Não se esqueça do Multicol!

Com bastante frequência eu respondo perguntas de Grid e Flexbox onde a resposta é não usar Grid ou Flexbox, mas sim olhar para Multicol. Você provavelmente não o usará em todos os sites, mas quando se deparar com um caso de uso, ele pode ser muito útil. No MDN existem recursos úteis para multicol e as propriedades de fragmentação relacionadas.

Se você usou multicol em um projeto, talvez deixe uma nota nos comentários, para compartilhar outras maneiras pelas quais podemos usar o recurso.