Propriedades grid-column-start, grid-column-end, grid-row-start, grid-row-end: Posicionando itens

Aprenda a posicionar itens grid em células específicas, abrangendo múltiplas linhas ou colunas.

Até agora, você aprendeu a definir a estrutura do seu grid (linhas e colunas) no Contêiner Grid. Por padrão, os Itens Grid se encaixam automaticamente nas células disponíveis, seguindo a ordem do HTML. Mas o verdadeiro poder do CSS Grid reside na capacidade de posicionar cada Item Grid exatamente onde você quiser, e até mesmo fazê-los ocupar várias células.

É para isso que servem as propriedades grid-column-start, grid-column-end, grid-row-start e grid-row-end. Elas são aplicadas aos Itens Grid e permitem que você defina onde um item começa e termina em relação às linhas de grade.

Pense nas linhas de grade como as "linhas de um caderno" ou as "divisões de um tabuleiro de xadrez". Elas são as fronteiras invisíveis que separam as células.

Entendendo as Linhas de Grade

Quando você define um grid, o navegador cria automaticamente linhas de grade numeradas:

  • Linhas de Coluna: As linhas verticais que separam as colunas. Elas são numeradas da esquerda para a direita (ou da direita para a esquerda em rtl). Se você tem 3 colunas, terá 4 linhas de coluna (1, 2, 3, 4).
  • Linhas de Linha: As linhas horizontais que separam as linhas. Elas são numeradas de cima para baixo. Se você tem 2 linhas, terá 3 linhas de linha (1, 2, 3).

Como funcionam as propriedades de posicionamento

Essas propriedades são aplicadas aos Itens Grid e aceitam os seguintes valores:

  1. Número da Linha:

    • O valor mais comum é o número da linha de grade onde o item deve começar ou terminar.
    • Ex: grid-column-start: 1; (o item começa na primeira linha de coluna).
    • Ex: grid-row-end: 3; (o item termina na terceira linha de linha).

  2. span <número>:

    • Faz com que o item ocupe um determinado número de trilhas (células).
    • Ex: grid-column-end: span 2; (o item ocupará 2 colunas a partir de sua grid-column-start).
    • Ex: grid-row-start: span 3; (o item ocupará 3 linhas a partir de sua grid-row-end ou da posição automática).

  3. auto (padrão):

    • O item é posicionado automaticamente pelo algoritmo de auto-colocação do grid.

Exemplo Prático:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Posicionando Itens Grid</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
      background-color: #f4f4f4;
    }

    .grid-container {
      display: grid;
      grid-template-columns: repeat(4, 1fr); /* 4 colunas de largura igual */
      grid-template-rows: repeat(3, 100px); /* 3 linhas de 100px de altura */
      gap: 10px;
      background-color: #e0e0e0;
      border: 2px solid #333;
      padding: 10px;
      width: 90%;
      margin: 0 auto 30px auto;
    }

    .grid-item {
      background-color: lightblue;
      border: 1px solid blue;
      padding: 15px;
      color: #333;
      font-weight: bold;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    /* --- Exemplos de posicionamento --- */

    .item-1 {
      background-color: lightcoral;
      grid-column-start: 1; /* Começa na linha de coluna 1 */
      grid-column-end: 3;   /* Termina na linha de coluna 3 (ocupando colunas 1 e 2) */
      grid-row-start: 1;    /* Começa na linha de linha 1 */
      grid-row-end: 2;      /* Termina na linha de linha 2 (ocupando linha 1) */
    }

    .item-2 {
      background-color: lightgreen;
      grid-column-start: 4; /* Começa na linha de coluna 4 */
      grid-row-start: 1;    /* Começa na linha de linha 1 */
      grid-row-end: 3;      /* Termina na linha de linha 3 (ocupando linhas 1 e 2) */
    }

    .item-3 {
      background-color: lightgoldenrodyellow;
      grid-column-start: 1;
      grid-column-end: span 2; /* Ocupa 2 colunas a partir da linha de coluna 1 */
      grid-row-start: 3;
      grid-row-end: span 1; /* Ocupa 1 linha a partir da linha de linha 3 */
    }

    .item-4 {
      background-color: lightsalmon;
      grid-column-start: 3;
      grid-column-end: span 2; /* Ocupa 2 colunas a partir da linha de coluna 3 */
      grid-row-start: 2;
      grid-row-end: span 2; /* Ocupa 2 linhas a partir da linha de linha 2 */
    }
  </style>
</head>
<body>
  <h1>Posicionando Itens Grid</h1>

  <div class="grid-container">
    <div class="grid-item item-1">Item 1 (col 1-3, row 1-2)</div>
    <div class="grid-item item-2">Item 2 (col 4, row 1-3)</div>
    <div class="grid-item">Item Padrão A</div>
    <div class="grid-item">Item Padrão B</div>
    <div class="grid-item item-3">Item 3 (col 1-span 2, row 3-span 1)</div>
    <div class="grid-item item-4">Item 4 (col 3-span 2, row 2-span 2)</div>
    <div class="grid-item">Item Padrão C</div>
    <div class="grid-item">Item Padrão D</div>
    <div class="grid-item">Item Padrão E</div>
    <div class="grid-item">Item Padrão F</div>
  </div>

  <p>Observe como os itens com propriedades de posicionamento ocupam células específicas e até múltiplas células, enquanto os itens sem essas propriedades se encaixam automaticamente nos espaços restantes.</p>
</body>
</html>

Resultado:

  • Você verá um grid com 4 colunas e 3 linhas.
  • Os itens coloridos estarão posicionados de forma personalizada, ocupando diferentes áreas do grid.
  • Os itens "Padrão" se encaixarão automaticamente nos espaços que sobraram.

Boas Práticas:

  • Visualização é Chave: Use as ferramentas de desenvolvedor do seu navegador (especialmente a sobreposição de grid) para ver os números das linhas de grade. Isso é essencial para posicionar itens com precisão.
  • Contagem das Linhas: Lembre-se que o número de linhas de grade é sempre número_de_colunas + 1 e número_de_linhas + 1.
  • span para simplicidade: Use span quando você sabe quantas trilhas um item deve ocupar, mas não se importa com o número exato da linha de grade final.
  • Evite sobreposição acidental: Se dois itens forem posicionados para ocupar a mesma célula, eles se sobreporão. Use z-index se precisar controlar a ordem de empilhamento.
  • Fluxo Automático: Se você posicionar alguns itens e deixar outros sem posicionamento explícito, o Grid tentará preencher os espaços vazios com os itens restantes, seguindo o fluxo automático.

Dominar essas propriedades de posicionamento é o que permite criar layouts complexos e não lineares com o CSS Grid, dando a você controle total sobre a disposição dos seus elementos.