Por muitos anos, os carros alegóricos do CSS têm sido um componente necessário, ainda que necessário, na criação de layouts de sites. Se o seu design exigisse várias colunas, você passaria a flutuar. O problema com este método é que, apesar da incrível engenhosidade que os web designers / desenvolvedores demonstraram na criação de layouts de site complexos, os floats de CSS nunca foram feitos para serem usados dessa maneira.
Embora os floats e o posicionamento de CSS tenham certeza de ter um lugar no design da Web por muitos anos, as novas técnicas de layout, incluindo CSS Grid e Flexbox, agora oferecem aos designers da Web novas maneiras de criar seus layouts de site. Outra nova técnica de layout que mostra muito potencial é Colunas Múltiplas CSS.
Colunas CSS já existem há alguns anos, mas a falta de suporte em navegadores mais antigos (principalmente versões mais antigas do Internet Explorer) impediu que muitos profissionais da Web usassem esses estilos em seu trabalho de produção.
Com o fim do suporte para as versões mais antigas do IE, alguns web designers agora estão experimentando novas opções de layout CSS, Colunas CSS incluídas e descobrindo que elas têm muito mais controle com essas novas abordagens do que com floats.
Noções básicas de colunas CSS
Como o próprio nome sugere, CSS Multiple Columns (também conhecido como CSS3 multi-column layout) permite dividir o conteúdo em um número definido de colunas. As propriedades CSS mais básicas que você usaria são:
- contagem de colunas
- lacuna de coluna
Para contagem de colunas, você especifica o número de colunas desejado. O intervalo da coluna seria as calhas ou espaçamento entre essas colunas. O navegador pegará esses valores e dividirá o conteúdo uniformemente no número de colunas que você especificar.
Um exemplo comum de várias colunas CSS na prática seria dividir um bloco de conteúdo de texto em várias colunas, semelhante ao que você veria em um artigo de jornal. Digamos que você tenha a seguinte marcação HTML (observe que, por exemplo, estou colocando apenas o início de um parágrafo, enquanto, na prática, provavelmente haveria vários parágrafos de conteúdo nessa marcação):
Se você escreveu esses estilos CSS:
.content {-moz-column-count: 3; -webkit-column-count: 3; contagem de colunas: 3; -moz-column-gap: 30px; -webkit-column-gap: 30px; intervalo da coluna: 30 px; }
Essa regra de CSS dividiria a divisão de “conteúdo” em 3 colunas iguais, com um intervalo de 30 pixels entre elas. Se você quisesse duas colunas em vez de 3, você simplesmente alteraria esse valor e o navegador calcularia as novas larguras dessas colunas para dividir o conteúdo uniformemente. Observe que usamos primeiro as propriedades prefixadas pelo fornecedor, seguidas pelas declarações não prefixadas.
Por mais fácil que seja, seu uso dessa maneira é questionável para o uso do site. Sim, você pode dividir um monte de conteúdo em várias colunas, mas essa pode não ser a melhor experiência de leitura para a Web, especialmente se a altura dessas colunas ficar abaixo da "dobra" da tela.
Os leitores teriam que rolar para cima e para baixo, a fim de ler o conteúdo completo. Ainda assim, o principal das Colunas CSS é tão fácil quanto você vê aqui, e pode ser usado para fazer muito mais do que apenas dividir o conteúdo de alguns parágrafos - ele pode, de fato, ser usado para o layout.
Layout com colunas CSS
Digamos que você tenha uma página da Web com uma área de conteúdo com três colunas de conteúdo. Este é um layout de site muito típico, e para alcançar essas 3 colunas, você normalmente iria flutuar as divisões que estão dentro. Com CSS de várias colunas, é muito mais fácil.
Aqui está um exemplo de HTML:
