Propriedade CSS grid-column – Números de Linha, Span e Nomes

A propriedade CSS grid-column é um atalho que posiciona um item de grid ao longo do eixo horizontal (inline). Ela define onde o item começa e onde termina, o que juntos determinam sua posição na coluna e quantas colunas ele ocupa. Ela combina as duas propriedades longas:

grid-column-start — a linha de coluna onde o item começa.
grid-column-end — a linha de coluna onde o item termina.

Um grid é dividido por linhas de grid, e grid-column funciona referenciando essas linhas em vez das células entre elas. Em um grid de quatro colunas há cinco linhas verticais, numeradas de 1 a 5 da esquerda para a direita (ou de −5 a −1 contando a partir da direita).

Nota: grid-column controla apenas o posicionamento ao longo das colunas. Para posicionar um item entre linhas, use grid-row. Para posicionar um item por linha e coluna ao mesmo tempo, use grid-area.


Valor inicial	`auto / auto`
Aplica-se a	Itens de grid
Herdada	Não
Animável	Sim
Especificação	CSS Grid Layout Level 1
Sintaxe DOM	`object.style.gridColumn = "1 / span 3"`

Sintaxe

/* Two explicit line numbers */
grid-column: <start-line> / <end-line>;

/* Start line + span count */
grid-column: <start-line> / span <number>;

/* Span by named line */
grid-column: span <name>;

/* Single value (sets start; end defaults to auto) */
grid-column: <start-line>;

/* Global keywords */
grid-column: initial | inherit | unset | revert;

Formas de valor

Há quatro formas comuns de escrever grid-column:

Forma	Exemplo	O que faz
Dois números de linha	`2 / 4`	Começa na linha 2, termina na linha 4 (ocupa as colunas 2–3)
Início + contagem de span	`2 / span 2`	Começa na linha 2, ocupa 2 colunas à frente
Número de linha negativo	`1 / -1`	Vai da primeira até a última linha (largura total)
Linhas nomeadas	`content-start / content-end`	Usa nomes definidos em `grid-template-columns`
Valor único	`3`	Define `grid-column-start: 3`; o fim é `auto` (uma coluna)

Quando você escreve apenas um valor (sem /), somente grid-column-start é definido; grid-column-end fica como auto, posicionando o item em uma única faixa de coluna.

Como as linhas de grid são numeradas

As linhas de grid são contadas a partir de 1 na borda inicial (esquerda em layouts LTR). Você também pode usar números negativos para contar a partir da borda final, então −1 sempre se refere à última linha independentemente de quantas colunas existem.

Column tracks:  [  1  ][  2  ][  3  ][  4  ]
Line numbers:  1       2      3      4       5
Negative:     -5      -4     -3     -2      -1

Isso significa que grid-column: 1 / -1 sempre faz um item se estender pela largura total do grid explícito, independentemente da quantidade de colunas.

Exemplos

Posicionando um item com números de linha explícitos

O Box 6 é posicionado entre as linhas de coluna 2 e 4, portanto ocupa as colunas 2 e 3.

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

Experimente Você Mesmo »

Posicionando o primeiro item com `1 / 3`

O Box 1 é posicionado em grid-column: 1 / 3, ocupando as duas primeiras faixas de coluna.

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

Experimente Você Mesmo »

Usando `span` e um item de largura total com `1 / -1`

A palavra-chave span é útil quando você sabe quantas colunas cobrir mas não o número da linha final. Uma linha final negativa (-1) sempre alcança a última linha de coluna, fazendo o item se estender pela largura total do grid explícito.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #4caf50;
        color: #fff;
        text-align: center;
        padding: 20px 0;
        font-size: 20px;
      }
      .featured {
        grid-column: 1 / span 2; /* starts at line 1, covers 2 columns */
      }
      .full-width {
        grid-column: 1 / -1; /* spans the whole explicit grid */
      }
    </style>
  </head>
  <body>
    <h2>span and full-width example</h2>
    <div class="grid-container">
      <div class="featured">Featured (2 cols)</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
      <div class="full-width">Full width (1 / -1)</div>
    </div>
  </body>
</html>

Posicionando itens com linhas nomeadas

Você pode nomear linhas de grid em grid-template-columns usando a sintaxe de colchetes e, em seguida, referenciar esses nomes em grid-column. Isso torna os layouts mais legíveis e resilientes a mudanças na quantidade de colunas.

<!DOCTYPE html>
<html>
  <head>
    <title>Named grid lines</title>
    <style>
      .grid-container {
        display: grid;
        /* Names the lines around the middle two columns */
        grid-template-columns:
          [full-start] 1fr
          [content-start] 2fr 2fr
          [content-end] 1fr
          [full-end];
        gap: 10px;
        background-color: #eee;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #5c6bc0;
        color: #fff;
        text-align: center;
        padding: 20px 0;
        font-size: 18px;
      }
      .sidebar {
        grid-column: full-start / content-start; /* first column only */
      }
      .main {
        grid-column: content-start / content-end; /* middle two columns */
      }
      .aside {
        grid-column: content-end / full-end; /* last column only */
      }
    </style>
  </head>
  <body>
    <h2>Named lines example</h2>
    <div class="grid-container">
      <div class="sidebar">Sidebar</div>
      <div class="main">Main content</div>
      <div class="aside">Aside</div>
    </div>
  </body>
</html>

Valores

Valor	Descrição
`<line-number>`	Um número inteiro de linha (positivo conta a partir do início, negativo a partir do fim).
`<line-name>`	Um nome personalizado definido em `grid-template-columns`.
`span <number>`	Ocupa o número especificado de faixas de coluna.
`span <name>`	Vai até a próxima linha com o nome especificado.
`auto`	O navegador posiciona o item automaticamente (padrão).
`initial`	Redefine para o valor padrão (`auto / auto`).
`inherit`	Herda o valor computado do elemento pai.
`unset`	Age como `inherit` se a propriedade for herdável, caso contrário como `initial`.

Problemas comuns

1 / -1 abrange apenas o grid explícito. Se itens forem posicionados no grid implícito (linhas/colunas extras que o navegador cria automaticamente), uma linha final negativa não se estende para essas faixas. Defina o grid completo com grid-template-columns primeiro.
span sem linha de início. Escrever grid-column: span 3 define apenas grid-column-end: span 3; o início é auto, então o navegador o escolhe. Isso é válido, mas o posicionamento depende da ordem do fluxo automático.
Busca de linha nomeada. Quando você referencia um nome que não existe no template, o navegador trata como auto. Sempre verifique o nome em grid-template-columns.
Atalho de valor único. grid-column: 3 define o início para a linha 3 e o fim como auto — não a linha 4. O item ocupa exatamente uma faixa de coluna, a menos que o fim posicionado automaticamente abranja mais.

Propriedades relacionadas

grid-column-start e grid-column-end — as duas propriedades longas que grid-column combina.
grid-row — o equivalente no eixo vertical; mesma sintaxe, aplicada a linhas.
grid-area — define o posicionamento por linha e coluna em uma única declaração.
grid-template-columns — define as faixas de coluna e as linhas nomeadas que grid-column utiliza.
grid-template-rows — define faixas de linha e linhas nomeadas para grid-row.
grid-auto-columns — controla o tamanho das faixas de coluna criadas implicitamente.
grid — o atalho completo para grid.

Prática

Qual é a funcionalidade da propriedade 'grid-column' em CSS?

É usada para ajustar o padding das células do grid.É usada para alinhar o conteúdo horizontalmente dentro de uma célula do grid.É usada para determinar a localização de um item do grid e seu span dentro das faixas horizontais do grid.É usada para definir a largura das células do grid.É usada para especificar uma linha, um span ou nada.