Propriedade CSS grid-column-start

A propriedade CSS grid-column-start define a linha de coluna onde um item de grade começa — sua borda inline-start. Junto com grid-column-end, ela determina quantas colunas o item ocupa e onde ele está posicionado. As duas são normalmente escritas com a abreviação grid-column: grid-column: <start> / <end>.

Use grid-column-start quando precisar de posicionamento explícito dentro de um layout CSS Grid — por exemplo, para fazer um banner hero abranger a partir da segunda coluna, ou para empurrar uma barra lateral para uma faixa específica independentemente da ordem do código-fonte.

Como as linhas de grade são numeradas: em uma grade com quatro colunas há cinco linhas verticais, numeradas de 1 a 5 a partir da borda inline-start. Você também pode usar números negativos: -1 refere-se à última linha, -2 à penúltima, e assim por diante.


Valor Inicial	`auto`
Aplica-se a	Itens de grade
Herdado	Não
Animável	Sim — a linha inicial é animável
Versão	CSS Grid Layout Module Level 1
Sintaxe DOM	`object.style.gridColumnStart = "2"`

Sintaxe

grid-column-start: auto | <integer> | <name> | span <n> | initial | inherit;

auto — o navegador posiciona o item usando posicionamento automático (padrão).
<integer> — um número de linha de grade, por ex. 2 ou -1.
<name> — uma linha nomeada definida em grid-template-columns.
span <n> — o item abrange n faixas de coluna a partir de onde for posicionado.

Valores

Valor	Descrição
`auto`	Padrão. O item segue o posicionamento automático normal e ocupa uma coluna.
`<integer>`	Um número de linha positivo ou negativo. Valores negativos contam a partir do final da grade explícita.
`<name>`	O nome de uma linha de grade, por ex. `main-start` quando definido via `[main-start]` em `grid-template-columns`.
`span <n>`	Abrange `n` faixas de coluna. Ao contrário de um número de linha, isso não fixa a posição inicial do item.
`initial`	Redefine a propriedade para seu valor inicial (`auto`).
`inherit`	Herda o valor do elemento pai.

Exemplos

Posicionando um item em uma linha específica

Definir grid-column-start: 2 posiciona o primeiro item de forma que sua borda esquerda se alinhe com a segunda linha vertical de grade, empurrando-o para a segunda posição 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: #666;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #ccc;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .box1 {
        grid-column-start: 6;
      }
    </style>
  </head>
  <body>
    <h2>grid-column-start: 6 — implicit column created</h2>
    <div class="grid-container">
      <div class="box1">1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>

Experimente Você Mesmo »

Como o template define apenas quatro colunas (linhas 1–5), solicitar que box1 comece na linha 6 força o navegador a criar colunas implícitas (linhas 5 e 6) para acomodá-lo. Este é um erro comum — sempre verifique se o número de linha permanece dentro da grade explícita, a menos que você queira intencionalmente faixas implícitas.

![Propriedade grid-column-start](/uploads/media/default/0001/03/52b22b9f4f2b6f8f1d65a6fb309fe3ee15e77b77.png "Grid-column-start property" =420x)

Abrangendo colunas com `span`

Usar span 2 instrui o item a ocupar duas faixas de coluna a partir de onde o posicionamento automático o colocar. Ao contrário de um número de linha, span é relativo — a posição inicial exata do item ainda é determinada pelo posicionamento automático.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .span-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        gap: 10px;
        background-color: #888;
        padding: 10px;
        margin-top: 20px;
      }
      .span-container > div {
        background-color: #fff;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .span-box1 {
        grid-column-start: span 2;
      }
    </style>
  </head>
  <body>
    <h2>grid-column-start: span 2</h2>
    <div class="span-container">
      <div class="span-box1">1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>

Experimente Você Mesmo »

Esta é a forma mais legível quando você se preocupa com a largura em colunas de um item, mas não com sua posição exata. Para fixar a posição e controlar a largura ao mesmo tempo, combine grid-column-start com grid-column-end, ou use a abreviação grid-column.

Posicionamento automático padrão

Quando definido como auto (o padrão), o item se encaixa na próxima célula disponível conforme determinado pelo algoritmo de grid auto-flow. Os itens preenchem a grade linha por linha.

<!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: #666;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #ccc;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .box1 {
        grid-column-start: auto;
      }
    </style>
  </head>
  <body>
    <h2>grid-column-start: auto (default)</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 class="box8">8</div>
      <div class="box9">9</div>
    </div>
  </body>
</html>

Experimente Você Mesmo »

Fixando na coluna 4

grid-column-start: 4 ancora a borda esquerda do primeiro item na quarta linha vertical. Os itens restantes preenchem as colunas anteriores por meio do posicionamento automático.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        gap: 12px;
        background-color: red;
        padding: 15px;
      }
      .grid-container > div {
        background-color: #dcdcdc;
        text-align: center;
        padding: 20px 0;
        font-size: 35px;
        color: white;
      }
      .box1 {
        grid-column-start: 4;
      }
    </style>
  </head>
  <body>
    <h2>grid-column-start: 4</h2>
    <div class="grid-container">
      <div class="box1">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>
  </body>
</html>

Experimente Você Mesmo »

Padrões comuns e armadilhas

Combinando início e fim para posicionamento exato

Para controle total sobre o posicionamento, combine grid-column-start com grid-column-end. A abreviação grid-column é a forma mais concisa de fazer isso:

/* Place item from column line 2 to column line 4 (spans 2 tracks) */
.item {
  grid-column: 2 / 4;
  /* equivalent to: */
  /* grid-column-start: 2; */
  /* grid-column-end: 4; */
}

Usando números de linha negativos

Inteiros negativos contam a partir do final da grade explícita. -1 é a última linha da grade explícita, facilitando estender um item até a borda oposta sem saber quantas colunas existem:

/* Full-width banner across all explicit columns */
.banner {
  grid-column-start: 1;
  grid-column-end: -1;
}

Isso é equivalente a grid-column: 1 / -1. Observe que números negativos endereçam apenas linhas na grade explícita (definida por grid-template-columns); eles não alcançam colunas implícitas criadas por overflow.

Linhas nomeadas

Quando você define linhas nomeadas em grid-template-columns, pode referenciá-las pelo nome em vez de número. Isso torna os layouts autodocumentáveis:

.container {
  display: grid;
  grid-template-columns: [sidebar-start] 200px [sidebar-end content-start] 1fr [content-end];
}

.sidebar {
  grid-column-start: sidebar-start;  /* or just: grid-column-start: 1 */
}

.main {
  grid-column-start: content-start;  /* or: grid-column-start: 2 */
}

Linhas nomeadas são especialmente úteis em componentes de layout grandes ou reutilizáveis onde os números de coluna podem mudar.

A interação entre o item e o posicionamento automático

Quando grid-column-start é definido para uma linha explícita, o posicionamento automático dos itens subsequentes recomeça a partir da próxima célula disponível após o item posicionado explicitamente. Isso pode deixar lacunas se não houver itens para preenchê-las — use grid-auto-flow: dense para preencher as lacunas automaticamente.

Propriedades relacionadas

grid-column-end — define a linha onde o item termina.
grid-column — abreviação de grid-column-start e grid-column-end.
grid-row-start — o equivalente no eixo de linha desta propriedade.
grid-row — abreviação de grid-row-start e grid-row-end.
grid-area — abreviação que define início e fim de linha e coluna de uma vez.
grid-template-columns — define as colunas e linhas nomeadas que esta propriedade referencia.
grid-auto-flow — controla como os itens posicionados automaticamente preenchem a grade, afetando o comportamento das lacunas.

Prática

O que a propriedade CSS grid-column-start faz?

Instrui o navegador onde iniciar a coluna em um layout de grade.Especifica o endereço de e-mail do remetente em um formulário de contato.Define a codificação de caracteres para o documento HTML.Determina a largura de uma borda em um layout de grade.Determina onde um item é posicionado em um layout de grade.

Sintaxe

Valores

Exemplos

Posicionando um item em uma linha específica

Abrangendo colunas com span

Posicionamento automático padrão

Fixando na coluna 4

Padrões comuns e armadilhas

Combinando início e fim para posicionamento exato

Usando números de linha negativos

Linhas nomeadas

A interação entre o item e o posicionamento automático

Propriedades relacionadas

Prática

Abrangendo colunas com `span`