Propriedade CSS column-span
A propriedade CSS column-span define como um elemento se estende por uma ou todas as colunas. Conheça os valores e veja exemplos.
A propriedade CSS column-span controla se um elemento permanece dentro de uma única coluna de um layout de múltiplas colunas ou se estende por todas elas. É uma das propriedades do CSS3.
Esta página aborda o que column-span faz, os valores que aceita, exemplos executáveis para cada um, quando utilizá-la e os problemas comuns que surgem.
Qual problema ela resolve
Quando você divide o texto em múltiplas colunas com column-count ou columns, todos os filhos do contêiner de múltiplas colunas fluem coluna por coluna — incluindo os títulos. Um título de seção que você deseja que atue como um banner sobre o bloco inteiro ficaria comprimido dentro da primeira coluna.
column-span: all tira um elemento do fluxo de colunas para que ele abranja a largura total, enquanto o conteúdo acima e abaixo dele continua fluindo em colunas. É exatamente assim que layouts de revistas e jornais tratam um título acima de um texto de corpo em múltiplas colunas.
.article {
column-count: 3;
}
.article h2 {
column-span: all; /* headline runs the full width above the 3 columns */
}Um elemento pode se estender por colunas somente se for um elemento block-level, no fluxo normal. Elementos flutuantes, com posicionamento absoluto ou inline ignoram column-span.
| Valor Inicial | none |
|---|---|
| Aplica-se a | elementos block-level no fluxo normal |
| Herdado | Não. |
| Animável | Não. |
| Versão | CSS Multi-column Layout Module Level 1 |
| Sintaxe DOM | object.style.columnSpan = "all"; (Nota: propriedades CSS usam camelCase em JavaScript) |
Sintaxe
Sintaxe da Propriedade CSS column-span
column-span: none | all | initial | inherit;Exemplo: valor none
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 4;
}
h2 {
column-span: none;
}
</style>
</head>
<body>
<div>
<h2>Lorem Ipsum is simply dummy text</h2> Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Resultado
Com none, o título é tratado como qualquer outro conteúdo e permanece dentro da primeira coluna. No próximo exemplo, o mesmo título se estende por todas as quatro colunas.
Exemplo: valor all
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 4;
}
h2 {
column-span: all;
}
</style>
</head>
<body>
<div>
<h2>Lorem Ipsum is simply dummy text</h2>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Exemplo: valor initial
initial redefine column-span para seu valor padrão, que é none — portanto o título se comporta exatamente como no primeiro exemplo e permanece dentro de uma coluna.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 4;
}
h2 {
column-span: initial;
}
</style>
</head>
<body>
<div>
<h2>Lorem Ipsum is simply dummy text</h2>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Exemplo: valor inherit
inherit assume o valor computado de column-span do elemento pai. Note que column-span não é herdado por padrão, portanto você usa essa palavra-chave somente quando deseja explicitamente que um filho copie a configuração do seu pai.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 4;
}
h2 {
column-span: inherit;
}
</style>
</head>
<body>
<div>
<h2>Lorem Ipsum is simply dummy text</h2>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Quando usar column-span
- Títulos e títulos de seção que devem ficar acima do texto do corpo em múltiplas colunas, como o cabeçalho de um jornal.
- Citações em destaque ou chamadas que você deseja que quebrem o ritmo das colunas para dar ênfase.
- Mídia larga — uma imagem, tabela ou gráfico em largura total que ficaria comprimido dentro de uma única coluna estreita.
Para todo o restante, mantenha o valor padrão none para que o conteúdo flua naturalmente entre as colunas.
Pontos de atenção
- Somente
noneeallsão valores de extensão. Não existecolumn-span: 2para estender por um número arbitrário de colunas — é tudo ou nada. - Um elemento em extensão divide o box de colunas. O conteúdo antes dele preenche as colunas, depois o elemento ocupa a largura total e, em seguida, o conteúdo restante inicia um novo conjunto de colunas abaixo dele.
column-spanfunciona apenas dentro de um contêiner de múltiplas colunas. Semcolumn-countoucolumnsno elemento pai, a propriedade não tem efeito.column-span: allpode interferir combreak-insidee no balanceamento de colunas em alguns navegadores, portanto teste com conteúdo longo.
Propriedades relacionadas
column-count— define em quantas colunas o conteúdo é dividido.column-width— define a largura ideal de cada coluna.columns— abreviação paracolumn-widthecolumn-count.column-gap— define o espaço entre as colunas.column-rule— desenha uma linha entre as colunas.
Valores
| Valor | Descrição |
|---|---|
| none | Este é o valor padrão. O elemento não se estende por todas as colunas; permanece em uma coluna. |
| all | O elemento se estende por todas as colunas. |
| initial | Define a propriedade para o seu valor padrão (none). |
| inherit | Herda a propriedade do seu elemento pai. |