O módulo CSS Multi-column Layout é uma ferramenta poderosa que permite criar facilmente layouts de várias colunas para suas páginas da web. A ascensão do design responsivo significa que é importante entender como usar este módulo.
Você pode usar as propriedades da coluna para criar layouts flexíveis e dinâmicos que se adaptam a diferentes tamanhos de tela.
Especificando o número, a largura e o espaço da coluna
Para criar um layout de várias colunas apropriado para o conteúdo da sua página, você deve começar decidindo quantas colunas deseja abranger. Uma das propriedades mais importantes no módulo Multi-coluna é a contagem de colunas propriedade, que você usa para definir o número de colunas nas quais dividir o conteúdo.
Por exemplo:
.recipiente {
contagem de colunas: 3;
}
Você também pode especificar a largura e o intervalo das colunas. Você pode definir o valor da largura da coluna usando qualquer um dos as unidades CSS suportadas como px, em, ou %.
Se largura da coluna está configurado para
auto, o navegador calculará a largura de cada coluna com base no contagem de colunas propriedade e o espaço disponível dentro do seu layout.Por exemplo, este CSS declara 3 colunas, cada uma com uma largura de 200 píxeis:
.recipiente {
contagem de colunas: 3;
largura da coluna: 200px;
}
O espaçamento entre colunas A propriedade especifica a lacuna, ou espaço, entre as colunas em um layout de várias colunas. Ele definirá o tamanho dos espaços em branco vazios entre as colunas adjacentes e pode assumir um valor de comprimento em pixels, ems ou qualquer outra unidade suportada.
Por exemplo:
.recipiente {
contagem de colunas: 3;
espaçamento entre colunas: 20px; /* define o intervalo entre as colunas para 20 pixels */
}
Por padrão, o valor de espaçamento entre colunas está configurado para normal. Seu navegador escolhe esse valor para obter um espaçamento consistente entre as colunas em seu layout, mantendo-se visualmente agradável. Esse valor também pode variar entre os navegadores e também pode depender do tamanho da fonte, altura da linha, propriedade de posiçãoe outras propriedades de layout do conteúdo das colunas.
Garantindo o Equilíbrio das Colunas
As colunas CSS tentam preencher todo o espaço disponível dentro de um layout. Às vezes, isso pode resultar em colunas com alturas significativamente diferentes, tornando o layout irregular.
Para equilibrar as colunas, você deve certificar-se de que cada coluna em seu layout tenha aproximadamente a mesma quantidade de conteúdo.
Você pode conseguir isso definindo o CSS preenchimento de coluna propriedade para equilíbrio. Um navegador tentará distribuir o conteúdo uniformemente em todas as colunas para que tenham aproximadamente a mesma altura.
O preenchimento de coluna propriedade está definida como equilíbrio por padrão, mas um valor de auto vai mudar esse comportamento. O uso de auto distribui o conteúdo em colunas com base no espaço disponível. Isso pode resultar em espaçamento desigual entre colunas e alturas de coluna desiguais. Pode até produzir um layout com colunas vazias.
Aqui está um exemplo de como usar o preenchimento de coluna propriedade para equilibrar as colunas em um layout de várias colunas:
.layout de várias colunas {
contagem de colunas: 3;
espaçamento entre colunas: 20px;
preenchimento de coluna: equilíbrio;
}
Neste exemplo, temos um layout de várias colunas com três colunas e um intervalo de 20 pixels entre cada coluna. Ao definir o preenchimento de coluna propriedade para equilíbrio, garantimos que o conteúdo seja distribuído uniformemente pelas colunas, resultando em alturas de coluna equilibradas.
É importante observar que preenchimento de coluna A propriedade pode não funcionar bem para todos os layouts e pode resultar em espaçamento desigual entre as colunas. Nesses casos, pode ser necessário usar JavaScript para balancear manualmente as colunas. Lembre-se de seguir as melhores práticas e usar aprimoramento progressivo para que você não dependa do JavaScript.
Juntando tudo
Você pode reunir tudo o que aprendeu sobre como implementar um layout com colunas CSS e usá-lo para criar um layout estilo revista.
Primeiro, crie a estrutura HTML básica. Use um elemento de contêiner para agrupar seu conteúdo e, em seguida, crie vários elementos filho que você pode organizar em colunas.
html>
<html>
<cabeça>
<linkrele="folha de estilo"href="CSScolumns.css" />
cabeça>
<corpo>
Elemento de contêiner
<divaula="layout de revista">Elementos filho
<divaula="artigo">
<h2>Título do artigoh2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in
magna vel lorem pharetra bibendum.p>
div><divaula="artigo">
<h2>Título do artigoh2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in
magna vel lorem pharetra bibendum.p>
div><divaula="artigo">
<h2>Título do artigoh2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in
magna vel lorem pharetra bibendum.p>
div>
div>
corpo>
html>
Para criar um layout de estilo de revista usando o módulo CSS Multi-coluna, combine o contagem de colunas, largura da coluna, espaçamento entre colunas, e preenchimento de coluna propriedades:
.magazine-layout {
contagem de colunas: 3;
largura da coluna: 300px;
espaçamento entre colunas: 20px;
preenchimento de coluna: equilíbrio;
}
.artigo {
cor de fundo: #f8f8f8;
raio da borda: 4px;
Sombra da caixa: 0 2px 4pxrgba(0, 0, 0, 0.1);
preenchimento: 10px;
arrombamento: evitar-coluna;
}
Este exemplo também define o arrombamento propriedade no .artigo classe, com valor de evitar-coluna. A propriedade garante que cada artigo permaneça em uma única coluna, em vez de se dividir em várias colunas. Veja como deve ficar o layout:
Usando Fallbacks para navegadores não suportados
É importante notar que o contagem de colunas propriedade não é suportada em todos os navegadores. Navegadores que não suportam contagem de colunas, exibirá o conteúdo em uma única coluna.
Para fornecer estilos alternativos para navegadores incompatíveis, você pode usar consultas de recursos como @apoia para detectar suporte para o contagem de colunas propriedade e fornecer estilos alternativos quando a propriedade não for suportada.
Por exemplo:
.recipiente {
/* Fallback para navegadores que não suportam contagem de colunas */
largura: 100%;
}
/* Detecta suporte para contagem de colunas */
@apoia (contagem de colunas:3) {
.recipiente {
contagem de colunas: 3;
}
}
Neste exemplo, usamos o @apoia consulta de recurso para detectar suporte para o contagem de colunas propriedade. Se o navegador suportar contagem de colunas, o recipiente elemento será exibido em três colunas. Se o navegador não suportar contagem de colunas, ele exibirá o conteúdo em uma única coluna usando o largura propriedade.
Dividindo o Conteúdo em Colunas
No geral, as colunas CSS fornecem uma maneira prática e poderosa de criar layouts de várias colunas flexíveis e responsivos que aprimoram a usabilidade e a experiência do usuário do conteúdo da web.
Usando colunas CSS e JavaScript juntas, você pode criar layouts ainda mais sofisticados e dinâmicos que se adaptam a diferentes preferências de usuários e tamanhos de dispositivos, tornando seu conteúdo da Web mais acessível e envolvente para seus usuários.
