Skip to content

Como usar colunas CSS para layouts de sites com várias colunas

12 de junho de 2021

Por muitos anos, os floats CSS têm sido um componente meticuloso, embora necessário, na criação de layouts de sites. Se o seu projeto exigia várias colunas, você se voltou para os flutuadores. O problema com esse método é que, apesar da incrível engenhosidade que os web designers / desenvolvedores mostraram na criação de layouts de sites complexos, os floats CSS nunca foram feitos para serem usados ​​dessa forma. Embora os floats e o posicionamento CSS tenham certamente 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 layouts de sites. Outra nova técnica de layout que mostra muito potencial é CSS Multiple Columns. As colunas CSS já existem há alguns anos, mas a falta de suporte em navegadores mais antigos (principalmente nas 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 estão agora experimentando novas opções de layout CSS, CSS Columns incluídas, e descobrindo que têm muito mais controle com essas novas abordagens do que com os floats.

Noções básicas de colunas CSS

Como o próprio nome sugere, CSS Multiple Columns (também conhecido como layout CSS3 de várias colunas) permite que você divida o conteúdo em um determinado número 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 que deseja. A lacuna da coluna seria as calhas ou espaçamento entre essas colunas. O navegador pegará esses valores e dividirá o conteúdo igualmente no número de colunas que você especificar. Um exemplo comum de CSS múltiplas colunas na prática seria dividir um bloco de conteúdo de texto em múltiplas colunas, semelhante ao que você veria em um artigo de jornal. Digamos que você tenha a seguinte marcação HTML (observe que, para fins de exemplo, colocamos apenas o início de um parágrafo, enquanto na prática provavelmente haveria vários parágrafos de conteúdo nesta marcação):

O título do seu artigo

Imagine muitos parágrafos de texto aqui …

Se você escreveu estes estilos CSS: .content {
-moz-coluna-contagem: 3;
-webkit-column-count: 3;
contagem de colunas: 3;
-moz-column-gap: 30px;
-webkit-column-gap: 30px;
gap da coluna: 30px;
}

Esta regra CSS dividiria a divisão do “conteúdo” em 3 colunas iguais com um intervalo de 30 pixels entre elas. Se você quisesse duas colunas em vez de 3, simplesmente mudaria esse valor e o navegador calcularia as novas larguras dessas colunas para dividir o conteúdo uniformemente. Observe que usamos as propriedades prefixadas do fornecedor primeiro, seguidas pelas declarações não prefixadas. Por mais fácil que seja, seu uso desta forma é questionável para o uso do site. Sim, você pode dividir um monte de conteúdo em várias colunas, mas esta pode não ser a melhor experiência de leitura para a web, especialmente se a altura dessas colunas cair abaixo da “dobra” da tela. Os leitores teriam que rolar para cima e para baixo para ler o conteúdo completo. Ainda assim, o princípio 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 layout.

Layout com colunas CSS

Digamos que você tenha uma página da web com uma área de conteúdo com 3 colunas de conteúdo. Este é um layout de site muito comum e, para obter essas 3 colunas, você normalmente flutuaria as divisões que estão dentro. Com CSS múltiplas colunas, é muito mais fácil. Aqui está um exemplo de HTML:

Do Nosso Blog

O conteúdo iria aqui …

próximos eventos

O conteúdo iria aqui …

O CSS para fazer essas colunas múltiplas começa com o que você viu anteriormente: .content {
-moz-coluna-contagem: 3;
-webkit-column-count: 3;
contagem de colunas: 3;
-moz-column-gap: 30px;
-webkit-column-gap: 30px;
gap da coluna: 30px;
}

Agora, o desafio aqui é que o navegador deseja dividir este conteúdo uniformemente, então se o comprimento do conteúdo dessas divisões for diferente, o navegador irá realmente dividir o conteúdo de uma divisão individual, adicionando o início dela a uma coluna e, em seguida, continuando em outro (você pode ver isso usando este código para executar um experimento e adicionar diferentes comprimentos de conteúdo dentro de cada divisão). Não é isso que você quer. Você deseja que cada uma dessas divisões crie uma coluna distinta e, não importa o quão grande ou pequeno o conteúdo de uma divisão individual possa ser, você nunca quer que ela seja dividida. Você pode conseguir isso adicionando esta linha adicional de CSS: .content div {
display: bloco embutido;
}

Isso forçará as divisões que estão dentro do “conteúdo” a permanecerem intactas, mesmo quando o navegador o divide em várias colunas. Melhor ainda, como não demos nada aqui uma largura fixa, essas colunas serão redimensionadas automaticamente conforme o navegador for redimensionado, tornando-as um aplicativo ideal para sites responsivos. Com esse estilo “inline-block” em vigor, cada uma das suas 3 divisões será uma coluna distinta de conteúdo.

Usando a largura da coluna

Há outra propriedade além de “contagem de colunas” que você pode usar e, dependendo das suas necessidades de layout, pode ser a melhor escolha para o seu site. Isso é “largura da coluna”. Usando a mesma marcação HTML mostrada anteriormente, poderíamos fazer isso com nosso CSS: .content {
-moz-column-width: 500px;
-webkit-column-width: 500px;
largura da coluna: 500px;
-moz-column-gap: 30px;
-webkit-column-gap: 30px;
gap da coluna: 30px;
}
.content div {
display: bloco embutido;
}

A maneira como isso funciona é que o navegador usa essa “largura da coluna” como o valor máximo dessa coluna. Portanto, se a janela do navegador tiver menos de 500 pixels de largura, essas 3 divisões aparecerão em uma única coluna, uma sobre a outra. Este é um layout típico usado para layouts de celular / tela pequena. Conforme a largura do navegador aumenta para ser grande o suficiente para caber 2 colunas junto com as lacunas de coluna especificadas, o navegador irá automaticamente de um layout de coluna única para duas colunas. Continue aumentando a largura da tela e, eventualmente, você obterá um design de 3 colunas, com cada uma de nossas 3 divisões exibidas em sua própria coluna. Novamente, esta é uma ótima maneira de obter alguns layouts responsivos e amigáveis ​​para vários dispositivos, e você nem precisa usar consultas de mídia para alterar os estilos de layout!

Outras propriedades da coluna

Além das propriedades abordadas aqui, também existem propriedades para “regra de coluna”, incluindo valores de cor, estilo e largura que permitem criar regras entre as colunas. Eles seriam usados ​​em vez de bordas se você quiser ter algumas linhas separando suas colunas.

Hora de experimentar

Atualmente, o CSS Multiple Column Layout é muito bem suportado. Com prefixos, mais de 94% dos usuários da web seriam capazes de ver esses estilos, e esse grupo sem suporte seria apenas versões muito mais antigas do Internet Explorer que não são mais compatíveis de qualquer maneira. Com este nível de suporte agora em vigor, não há razão para não começar a experimentar colunas CSS e implementar esses estilos em sites prontos para produção. Você pode iniciar seus experimentos usando o HTML e CSS apresentados neste artigo e brincar com diferentes valores para ver o que funcionaria melhor para as necessidades de layout do seu site.

Formato mla apa chicago Sua Citação

Girard, Jeremy. “Como usar colunas CSS para layouts de sites com várias colunas.” ThoughtCo, maio. 14 de 2021, thinkingco.com/using-css-columns-instead-of-floats-4053898.
Girard, Jeremy. (2021, 14 de maio). Como usar colunas CSS para layouts de sites com várias colunas. Obtido em https://www.thoughtco.com/using-css-columns-instead-of-floats-4053898
Girard, Jeremy. “Como usar colunas CSS para layouts de sites com várias colunas.” ThoughtCo. https://www.thoughtco.com/using-css-columns-instead-of-floats-4053898 (acessado em 12 de junho de 2021).