Propriedade CSS grid-column-gap

A propriedade grid-column-gap define o tamanho do espaçamento (o espaço vazio) entre as colunas de um layout CSS Grid. Ela controla apenas o espaçamento horizontal entre as trilhas de coluna — nunca adiciona espaço nas bordas externas do contêiner grid.

O valor pode ser um comprimento fixo (como px, rem ou em) ou uma porcentagem. Quando uma porcentagem é utilizada, ela é resolvida em relação ao tamanho inline (a largura) do contêiner grid.

Aviso

grid-column-gap está obsoleta. Era um nome antigo, específico para grid, que os navegadores renomearam desde então. Em código novo, use a propriedade moderna column-gap, ou o atalho gap para definir os espaçamentos de linha e coluna ao mesmo tempo. Todos os navegadores atuais ainda aceitam grid-column-gap como um alias de column-gap, portanto os layouts existentes continuam funcionando — mas não há razão para usá-la em novas folhas de estilo.

Por que usar gap em vez de margens?

Antes de existirem as propriedades de gap, os autores criavam espaçamento entre itens grid com margin, e depois tinham que cancelar a margem extra que vazava para o primeiro e o último item. O grid-column-gap resolve isso de forma limpa: o espaçamento aparece apenas entre as trilhas de coluna, de modo que o grid permanece alinhado com seu contêiner em ambos os lados. O navegador também mantém o espaçamento consistente conforme as trilhas crescem ou diminuem, o que as margens não conseguem garantir.

Referência da propriedade

Propriedade	Valor
Valor inicial	`normal` (equivalente a `0` no grid)
Aplica-se a	Contêineres Grid
Herdada	Não
Animável	Sim
Versão	CSS Grid Layout Module Level 1
Sintaxe DOM	`object.style.gridColumnGap = "30px"`

Sintaxe

grid-column-gap: <length-percentage> | normal | initial | inherit;

<length-percentage> — um valor não negativo em px, em, rem, ch, vw ou %. Valores negativos são inválidos.
normal — o padrão do navegador, que resolve para 0 em um contexto de grid.
initial — redefine a propriedade para seu valor inicial (normal).
inherit — herda o valor calculado do elemento pai (raramente útil, pois grid-column-gap não é herdada).

Exemplos

Gap com comprimento fixo (px)

O caso mais comum: um gap em pixels fixo que permanece do mesmo tamanho independentemente da largura do contêiner.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-column-gap: 30px;
        grid-row-gap: 10px;
        background-color: #666;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #ccc;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-column-gap property example</h2>
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
      <div>10</div>
      <div>11</div>
      <div>12</div>
    </div>
  </body>
</html>

Experimente Você Mesmo »

Resultado

Os doze itens fluem em quatro colunas; cada coluna é separada da próxima por 30px, enquanto grid-row-gap: 10px mantém as linhas afastadas.

Gap em porcentagem (%)

Um valor em porcentagem é resolvido em relação ao tamanho inline (largura) do contêiner grid. Os espaçamentos crescem e diminuem conforme o contêiner é redimensionado.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-column-gap: 20%;
        grid-row-gap: 10px;
        background-color: #666;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #ccc;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-column-gap property example</h2>
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
    </div>
  </body>
</html>

Experimente Você Mesmo »

Gaps em porcentagem raramente são o que se deseja: com três gaps de 20% cada, os gaps sozinhos consomem 60% do contêiner — deixando apenas 40% para quatro trilhas de coluna auto. Comprimentos fixos (px, rem, em) oferecem espaçamentos muito mais previsíveis.

Migrando para a sintaxe moderna

A substituição é uma renomeação direta — o valor é idêntico, apenas o nome da propriedade muda:

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);

  /* Deprecated — avoid in new code */
  grid-column-gap: 30px;

  /* Modern equivalent */
  column-gap: 30px;

  /* Or set both axes at once with the gap shorthand */
  /* gap: <row-gap> <column-gap>; */
  gap: 10px 30px;
}

gap: 10px 30px é equivalente a row-gap: 10px; column-gap: 30px;. Passar um único valor — gap: 30px — aplica-o tanto às linhas quanto às colunas. O atalho gap também funciona dentro de contêineres Flexbox, tornando-o a escolha mais versátil.

Como os gaps interagem com unidades fr

Quando você combina um gap com colunas fr, o navegador subtrai todo o espaço de gap da largura disponível antes de distribuir as frações fr. Isso significa que os gaps nunca afetam a proporção entre as trilhas:

.grid {
  display: grid;
  /* Three equal columns; gaps come out of available space first */
  grid-template-columns: repeat(3, 1fr);
  column-gap: 24px; /* modern equivalent of grid-column-gap: 24px */
}

Se o contêiner tiver 300px de largura e houver dois gaps de 24px cada, os 252px restantes são divididos igualmente: cada coluna tem 84px. Essa é uma das razões pelas quais trilhas fr combinadas com um column-gap fixo (ou grid-column-gap) produzem layouts mais previsíveis do que gaps baseados em porcentagem.

Valores

Valor	Descrição
`<length>`	Um gap fixo em `px`, `em`, `rem`, etc. Valores negativos não são permitidos.
`<percentage>`	Uma porcentagem do tamanho inline (largura) do contêiner grid.
`normal`	O padrão do navegador, que equivale a `0` dentro de um grid.
`initial`	Redefine para o valor inicial (`normal`).
`inherit`	Usa o valor calculado do elemento pai.

Prática

Qual é a finalidade da propriedade 'column-gap' no layout CSS grid?

Define o tamanho do gap entre as colunas.Define o tamanho do gap entre as linhas.Determina a cor das linhas do grid.Antes da introdução da propriedade 'gap', 'column-gap' era usada para criar espaçamentos.Alinha os itens do grid ao longo do eixo da coluna.

Propriedades relacionadas

column-gap — a substituição moderna desta propriedade.
gap — atalho para definir os gaps de linha e coluna juntos.
grid-row-gap — a propriedade correspondente para gaps verticais entre linhas.
grid-template-columns — define as trilhas de coluna entre as quais os gaps se situam.
grid-template-rows — define as trilhas de linha sobre as quais grid-row-gap atua.
grid — o atalho que transforma um elemento em um contêiner grid.