Exportar (0) Imprimir
Expandir Tudo

Layout com várias colunas

O Internet Explorer 10 e os aplicativos da Windows Store em JavaScript para Windows 8 são compatíveis com o Módulo de Layout Multicoluna CSS. Na ocasião em que este documento foi redigido, o Módulo de Layout Multicoluna CSS era uma Recomendação Candidata do W3C (World Wide Web Consortium). O layout com várias colunas permite que o conteúdo seja transmitido para várias colunas que retêm uma lacuna e uma regra opcional entre elas. Ele também possibilita variar o número de colunas com base no tamanho da janela do navegador.

Um elemento com várias colunas é definido pelo W3C como um elemento cuja propriedade column-width ou column-count não é definida como "auto" e, portanto, atua como um contêiner para um layout com várias colunas. O layout com várias colunas apresenta a caixa de coluna, que é definida como um novo tipo de contêiner entre a caixa de conteúdo e o conteúdo. As caixas de coluna contêm linhas, que são ordenadas na direção do elemento com várias colunas. Cada caixa de coluna tem uma altura e largura da coluna. As caixas de colunas adjacentes são separadas por uma lacuna de coluna, que opcionalmente pode conter uma regra de coluna.

Especificando a largura e a contagem das colunas

Você deve, no mínimo, especificar uma largura para as colunas em um elemento com várias colunas. O Internet Explorer 10 exibirá tantas colunas quantas for possível, não de largura menor do que o valor que você especificar, na janela do navegador. Para especificar a largura das colunas, use a seguinte propriedade:

PropriedadeDescrição

column-width

Especifica a largura ideal das colunas em um elemento com várias colunas.

Estes são os valores possíveis da propriedade:

auto

Indica que a largura ideal da coluna é determinada pelos outros valores de propriedades do elemento com várias colunas, como a propriedade column-count. Esse é o valor padrão.

<length>

Um valor de comprimento relativo ou absoluto, conforme especificado em Referência de unidades e valores CSS.

 

Por exemplo, o seletor a seguir adicionou a propriedade column-width e a definiu com 200 pixels. Isso significa que o Internet Explorer 10 preencherá a janela do navegador com o máximo possível de colunas que tiverem largura de 200 pixels ou mais.


<style type="text/css">
#multicol1 {
  column-width: 200px;
}
</style>


Você pode exibir este seletor aplicado a um grande bloco de texto. (O Internet Explorer 10 ou um navegador compatível com propriedades de várias colunas CSS3 sem prefixo é necessário para esta página ser renderizada corretamente.)

Você também pode especificar quantas colunas um elemento com várias colunas deve ter. Para especificar a contagem de colunas, use a seguinte propriedade:

PropriedadeDescrição

column-count

Especifica o número de colunas ideal em um elemento com várias colunas.

Estes são os valores possíveis da propriedade:

auto

Indica que o número de colunas é determinado pelos outros valores de propriedades do elemento com várias colunas, como a propriedade column-width. Esse é o valor padrão.

<integer>

Especifica o número de colunas.

 

Por exemplo, o seletor a seguir adicionou a propriedade column-count e a definiu como "2". Isso significa que o Internet Explorer 10 preencherá a janela do navegador com exatamente duas colunas.


<style type="text/css">
#multicol1 {
  column-count: 2;
}
</style>


Você pode exibir este seletor aplicado a um grande bloco de texto. (O Internet Explorer 10 ou um navegador compatível com propriedades de várias colunas CSS3 sem prefixo é necessário para esta página ser renderizada corretamente.)

A largura e a contagem de colunas também pode ser expressa usando a seguinte propriedade abreviada:

PropriedadeDescrição

columns

Um valor abreviado que especifica valores para as propriedades column-width e column-count de um elemento com várias colunas.

 

A sintaxe dessa propriedade é a seguinte:

columns: <column-width> <column-count>;

A seguinte sintaxe também é válida:

columns: <column-count> <column-width>;

Se apenas um inteiro for especificado, column-width será definido com auto, e column-count será definido com o inteiro. Se somente um valor de comprimento for especificado, column-width será definido com o valor de comprimento, e column-count será definido com auto. Se somente auto for especificado, tanto column-width quanto column-count serão definidos com auto

Por exemplo, o seletor a seguir adicionou a propriedade columns e a definiu como igual a "auto 12em". Isso significa que o elemento com várias colunas terá uma column-width de 12 ems e uma column-countauto.


<style type="text/css">
#multicol3 {
  columns: auto 12em;
}
</style>


Você pode exibir este seletor aplicado a um grande bloco de texto. (O Internet Explorer 10 ou um navegador compatível com propriedades de várias colunas CSS3 sem prefixo é necessário para esta página ser renderizada corretamente.)

Especificando lacunas e regras das colunas

Lacunas e regras são posicionadas entre as colunas de um elemento com várias colunas, ao longo de todo o seu comprimento. As lacunas criam um espaço entre as colunas, a fim de facilitar a leitura. Uma regra de coluna é desenhada no meio de uma lacuna e apenas entre colunas que tenham conteúdo.

As seguintes propriedades especificam lacunas e regras das colunas:

PropriedadeDescrição

column-gap

Especifica a largura da lacuna entre colunas em um elemento com várias colunas.

Os valores possíveis para esta propriedade são:

normal

A largura padrão de 1 em.

<length>

Um valor de comprimento absoluto ou relativo, conforme especificado na Referência de unidades e valores CSS.

column-rule-color

Especifica a cor para todas as regras das colunas em um elemento com várias colunas. Esta propriedade pode ser definida com qualquer valor de cor aceito.

column-rule-style

Especifica o estilo para todas as regras das colunas em um elemento com várias colunas. Esta propriedade aceita os mesmos valores que a propriedade border-style.

column-rule-width

Especifica a largura de todas as regras das colunas em um elemento com várias colunas. Esta propriedade aceita os mesmos valores que a propriedade border-width.

column-rule

Um valor abreviado que especifica valores para as propriedades column-rule-width, column-rule-style e column-rule-color de um elemento com várias colunas.

A sintaxe dessa propriedade é a seguinte:

column-rule: <column-rule-width> <column-rule-style> <column-rule-color>;

 

Veja a seguir um exemplo de diversas dessas propriedades em um seletor:


<style type="text/css">
#multicol4 {
  columns: auto 12em;
  column-gap: 1em;
  column-rule-width: 1em;
  column-rule-style: solid;
  column-rule-color: black;
}
</style>


Nesse caso, tanto a lacuna quanto a regra da coluna foram especificadas com largura de 1 em. A regra da coluna tem a cor preto sólido. Você pode exibir este seletor aplicado a um grande bloco de texto. (O Internet Explorer 10 ou um navegador compatível com propriedades de várias colunas CSS3 sem prefixo é necessário para esta página ser renderizada corretamente.)

Esteja ciente de que o exemplo anterior também poderia ser expressado da seguinte forma, usando a propriedade abreviada column-rule:


<style type="text/css">
#multicol4 {
  columns: auto 12em;
  column-gap: 1em;
  column-rule: 1em solid black;
}
</style>


Especificando quebras de coluna

Você pode especificar quando o conteúdo deve ser quebrado entre as colunas. Isso evita que ele seja quebrado no meio de parágrafos, seções e assim por diante. O conceito de quebras de coluna é semelhante ao de quebras de página ao imprimir e, de fato, pode ser controlado por CSS (Folhas de Estilos em Cascata) da mesma forma.

As seguintes propriedades controlam as quebras de coluna:

PropriedadeDescrição

break-before

Especifica o comportamento de quebra de coluna que precede um bloco de conteúdo em um elemento com várias colunas.

Esta propriedade aceita os mesmos valores que a propriedade page-break-before, mais os seguintes valores:

page

Sempre forçar uma quebra de página antes da caixa gerada.

column

Sempre forçar uma quebra de coluna antes da caixa gerada.

avoid-page

Evitar uma quebra de página antes da caixa gerada.

avoid-column

Evitar uma quebra de coluna antes da caixa gerada.

break-after

Especifica o comportamento de quebra de coluna que se segue a um bloco de conteúdo em um elemento com várias colunas.

Esta propriedade aceita os mesmos valores que a propriedade page-break-after, mais os seguintes valores:

page

Sempre forçar uma quebra de página após a caixa gerada.

column

Sempre forçar uma quebra de coluna após a caixa gerada.

avoid-page

Evitar uma quebra de página após a caixa gerada.

avoid-column

Evitar uma quebra de coluna após a caixa gerada.

break-inside

Especifica o comportamento de quebra de coluna que ocorre dentro de um bloco de conteúdo em um elemento com várias colunas.

Esta propriedade aceita os mesmos valores que a propriedade page-break-inside, mais os seguintes valores:

avoid-page

Evitar uma quebra de página dentro da caixa gerada.

avoid-column

Evitar uma quebra de coluna dentro da caixa gerada.

 

Veja a seguir um exemplo de diversas dessas propriedades em um seletor:


<style type="text/css">
#multicol5 {
  columns: auto 12em;
  column-gap: 1em;
  column-rule-width: 1px;
  column-rule-style: solid;
  column-rule-color: black;
}
#multicol5 h2 {
  column-span: all;
  background: lightgreen;
}
#multicol5 blockquote {
  break-inside: avoid-column;
}
</style>


Nesse exemplo, todos os elementos h2 são precedidos de uma quebra de coluna, bem como de uma margem de 2 em, e nenhuma quebra de coluna pode aparecer dentro de um elemento blockquote. Você pode exibir estes seletores aplicados a um grande bloco de texto. (O Internet Explorer 10 ou um navegador compatível com propriedades de várias colunas CSS3 sem prefixo é necessário para esta página ser renderizada corretamente.)

Especificando a extensão da coluna

Você pode especificar que um bloco de conteúdo se estenda por diversas colunas. Um elemento que foi abrangido por diversas colunas efetivamente atua como uma quebra entre o conteúdo antes e após a extensão. A seguinte propriedade controla a extensão das colunas:

PropriedadeDescrição

column-span

Especifica o número de colunas que um bloco de conteúdo abrange em um elemento com várias colunas.

Os valores possíveis para esta propriedade são:

all

O bloco de conteúdo abrange todas as colunas de uma página. Todo o conteúdo que é declarado antes do bloco de conteúdo é mostrado antes do bloco de conteúdo.

"1"

Este é o valor padrão. O bloco de conteúdo não abrange várias colunas.

 

Veja a seguir um exemplo dessa propriedade em um seletor:


<style type="text/css">
#multicol6 {
  columns: auto 12em;
  column-gap: 1em;
  column-rule-width: 1px;
  column-rule-style: solid;
  column-rule-color: black;
}
#multicol6 h2 {
  column-span: all;
  background: lightgreen;
}
</style>


Nesse caso, todos os elementos h2 abrangem todas as colunas e têm um plano de fundo verde-claro.

Você pode exibir estes seletores aplicados a um grande bloco de texto. (O Internet Explorer 10 ou um navegador compatível com propriedades de várias colunas CSS3 sem prefixo é necessário para esta página ser renderizada corretamente.)

Balanceando o conteúdo das colunas

Você pode especificar se quer balancear o conteúdo das colunas — ou seja, minimizar a variação no comprimento das colunas. Caso contrário, elas serão preenchidas sequencialmente e terão diferentes comprimentos.

A seguinte propriedade controla o preenchimento das colunas:

PropriedadeDescrição

column-fill

Especifica como os comprimentos das colunas em um elemento com várias colunas são afetados pelo fluxo de conteúdo.

Os valores possíveis para esta propriedade são as seguintes palavras-chave:

balance

As colunas são preenchidas sequencialmente de forma que as alturas fiquem as mais balanceadas possíveis, dependendo dos outros valores das propriedades das colunas.

auto

Este é o valor padrão. As colunas são preenchidas sequencialmente de forma que possam diferir no comprimento, dependendo dos outros valores das propriedades das colunas.

O balanceamento das colunas também dependerá dos valores das propriedades orphans e widows, se estiverem definidas.

 

Veja a seguir um exemplo dessa propriedade em um seletor:


<style type="text/css">
#multicol7 {
  columns: auto 12em;
  column-gap: 1em;
  column-rule-width: 1px;
  column-rule-style: solid;
  column-rule-color: black;
  column-fill: balance;
}
</style>


Nesse caso, a propriedade column-fill foi definida com balance, o que significa que os comprimentos das colunas estão os mais balanceados possíveis.

Você pode exibir estes seletores aplicados a um grande bloco de texto. (O Internet Explorer 10 ou um navegador compatível com propriedades de várias colunas CSS3 sem prefixo é necessário para esta página ser renderizada corretamente.)

Referência de API

Multi-column Layout

Amostras e tutoriais

Exemplo de layout CSS com várias colunas
Design de sites adaptáveis

Demonstrações do Test Drive do Internet Explorer

Colunas de Tweet
Prática: layout com várias colunas

Postagens no blog do IE

Visualização da plataforma do IE10 e recursos CSS para layouts adaptáveis

Especificação

Módulo de Layout com Várias Colunas CSS

 

 

Mostrar:
© 2014 Microsoft