Propriedade CSS column-gap
A propriedade column-gap define o tamanho do espaço entre colunas. Conheça os valores e veja exemplos.
A propriedade CSS column-gap define o tamanho do espaço (a calha) entre colunas adjacentes. Ela funciona em três contextos de layout diferentes: layouts de múltiplas colunas criados com column-count, contêineres flex e contêineres grid. Em Flexbox e CSS Grid, ela é a metade horizontal do atalho gap e substitui a propriedade mais antiga grid-column-gap.
Esta página aborda a sintaxe da propriedade, seus valores aceitos, como ela se comporta em cada contexto de layout e os cuidados necessários com porcentagens e column-rule.
column-gap é uma das propriedades CSS3.
O que ela faz
Em um layout de múltiplas colunas, o navegador distribui o conteúdo em várias colunas. Por padrão, as colunas são separadas por um espaço normal (1em para elementos de múltiplas colunas). A propriedade column-gap permite substituir esse padrão por qualquer valor de comprimento, ajustando a calha de acordo com o seu design.
Ela aceita a palavra-chave normal ou um valor <length>:
normal— o valor padrão. Para layouts de múltiplas colunas, resolve para1em. Para contêineres flex e grid, resolve para0.<length>— uma calha fixa como30px,2emou1rem. Valores negativos não são permitidos.<percentage>— um espaço relativo à largura do elemento.
A propriedade também suporta as palavras-chave padrão initial e inherit.
Os prefixos de fornecedor (-moz-column-gap, -webkit-column-gap) não são mais necessários para os navegadores modernos. O suporte nativo está disponível em todos os principais navegadores.
Onde fica o column-rule
Quando um column-rule é desenhado entre as colunas, ele fica no centro do espaço e não ocupa espaço próprio. Se você aumentar o column-gap, a linha permanece centralizada com mais espaço em cada lado; se o espaço for muito pequeno, uma linha espessa pode visualmente sobrecarregar o texto.
column-gap vs. gap e grid-column-gap
Em contêineres flex e grid, column-gap é a metade horizontal do atalho gap: gap: <row-gap> <column-gap>. A propriedade mais antiga grid-column-gap faz o mesmo trabalho no grid, mas está obsoleta — prefira column-gap.
| Valor Inicial | normal |
|---|---|
| Aplica-se a | Elementos de múltiplas colunas, contêineres flex, contêineres grid. |
| Herdado | Não. |
| Animável | Sim. O comprimento do espaço entre colunas é animável. |
| Versão | CSS3 |
| Sintaxe DOM | object.style.columnGap = "100px"; |
Sintaxe
Sintaxe da Propriedade CSS column-gap
column-gap: length | normal | initial | inherit;Exemplo da propriedade column-gap:
Exemplo da Propriedade CSS column-gap com o valor normal
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 4;
column-gap: normal;
}
</style>
</head>
<body>
<h2>The column-gap property example</h2>
<div>
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 column-gap: normal, as quatro colunas são separadas pela calha padrão de 1em.
Exemplo da propriedade column-gap com o valor "length":
Aqui definimos uma calha explícita de 30px, dando às colunas mais separação do que o padrão normal.
Exemplo da Propriedade CSS column-gap com o valor length
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 4;
column-gap: 30px;
}
</style>
</head>
<body>
<h2>Column-gap property example</h2>
<div>
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>Usando column-gap em flex e grid
A mesma propriedade controla a calha horizontal entre itens flex e entre colunas de grid. Nesses contextos, ela geralmente é escrita através do atalho gap, mas column-gap por si só é totalmente suportado:
/* Flex container: 24px between items in a row */
.flex {
display: flex;
column-gap: 24px;
}
/* Grid: 16px between columns, 8px between rows */
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 16px;
row-gap: 8px;
}Note que em flex e grid o valor padrão de column-gap é 0, enquanto em um layout de múltiplas colunas o padrão normal é 1em.
Valores em porcentagem
Um espaço em porcentagem é calculado em relação à largura do elemento, não à largura da coluna:
div {
column-count: 3;
column-gap: 5%; /* 5% of the element's width */
}Como as porcentagens dependem da largura do contêiner, a calha cresce e diminui conforme o layout é redimensionado — útil para designs fluidos, mas mais difícil de prever do que um valor fixo em px.
Valores
| Valor | Descrição |
|---|---|
| normal | O tamanho de espaço padrão entre colunas. |
| length | Especifica o comprimento que define o espaço entre colunas. Pode ser especificado em em, px ou porcentagens. |
| initial | Define a propriedade com seu valor padrão. |
| inherit | Herda a propriedade do elemento pai. |
Propriedades relacionadas
- column-count — define em quantas colunas o conteúdo é dividido.
- column-width — sugere uma largura ideal para cada coluna.
- columns — atalho para
column-widthecolumn-count. - column-rule — desenha uma linha dentro do espaço entre colunas.
- grid-gap — o atalho
gappara definir espaços de linha e coluna juntos no grid.