Propriedade column-span
Última atualização: 2026-09-13
column-span Propriedade column-span
A propriedade column-span especifica se um elemento abrange várias colunas. Definida como all, o elemento abrange todas as colunas; é comumente usada para títulos ou subtítulos em um layout de várias colunas, para que se destaquem visualmente do conteúdo em colunas.
| Categoria | |
|---|---|
| Valor Inicial | none |
| Herdado | Não |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
column-span: none | all;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
none | all | Palavra-chave | Se o elemento abrange colunas. |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| column-span | ✓ v57 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Suportado em todos os principais navegadores | |||||
Dica： column-span:all combina bem com títulos em layouts de várias colunas, permitindo que o título abranja todas as colunas para uma estrutura de artigo mais clara.
Aviso： column-span afeta apenas o próprio elemento; não altera a distribuição de colunas de outros elementos. O suporte era limitado em versões mais antigas do Firefox, então verifique a compatibilidade.
❓ Perguntas Frequentes
Qcolumn-span pode abranger um número específico de colunas?
ANão. column-span tem apenas dois valores, none, que não abrange e é o padrão, e all, que abrange todas as colunas, então você não pode abranger apenas 2 ou 3 colunas. Para abranger parcialmente colunas, seria necessário simulá-lo com contêineres de várias colunas aninhados ou mudar para um layout grid. Essa é uma limitação deliberada da especificação CSS Multi-column e não pode ser contornada com um valor.
QQuais elementos podem usar column-span?
Acolumn-span se aplica a elementos de nível de bloco no fluxo de nível superior de um contêiner de várias colunas. Os casos mais comuns são títulos, h1 a h6, subtítulos e citações destacadas que abrangem todas as colunas como um divisor visual. Ele não pode ser usado em elementos aninhados dentro de uma coluna, e o suporte dos navegadores varia; navegadores mais antigos podem simplesmente ignorá-lo, então trate-o como aprimoramento progressivo e sempre projete primeiro o fallback de coluna única.
QPor que column-span:all não está surtindo efeito?
APossíveis motivos: primeiro, o elemento não é um filho direto de nível de bloco do contêiner de várias colunas; segundo, o navegador é muito antigo, pois o suporte entre colunas estava incompleto em algumas versões e as compilações iniciais do Firefox tinham suporte limitado; terceiro, o contêiner de várias colunas em si não está ativo, com apenas uma coluna. Primeiro confirme que as colunas são renderizadas e então verifique a posição do elemento na hierarquia.
Qcolumn-span quebra a ordem de leitura do texto em várias colunas?
ANão. Um elemento column-span:all divide o texto de várias colunas em duas seções: as colunas acima dele são preenchidas primeiro, depois o elemento que abrange é exibido e então as colunas abaixo continuam. A ordem de leitura ainda segue o fluxo do documento; o título que abrange simplesmente força uma linha de largura total. Assim, colocar um título que abrange no topo mantém o corpo fluindo normalmente abaixo dele, e o mesmo vale para elementos que abrangem no meio do conteúdo.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
columns (Abreviação de várias colunas)
Configure um layout de várias colunas como um todo.
column-count
Define o número de colunas.
