Shorthands grid-column e grid-row: Atalhos para posicionamento

Simplifique o posicionamento de itens grid com atalhos.

Você acabou de aprender a posicionar Itens Grid usando as propriedades grid-column-start, grid-column-end, grid-row-start e grid-row-end. Embora elas ofereçam controle total, escrever quatro propriedades para cada item pode ser um pouco repetitivo.

É aí que entram os shorthands grid-column e grid-row. Eles são atalhos que permitem definir as linhas de início e fim de um Item Grid em uma única propriedade, tornando seu código mais conciso e legível.

Pense nesses shorthands como "comandos rápidos" para dizer a um Item Grid onde ele deve começar e até onde deve ir, tanto na horizontal quanto na vertical.

Como funcionam os shorthands

1. grid-column

Este shorthand define grid-column-start e grid-column-end.

Sintaxe:

.grid-item {
  grid-column: <grid-column-start> / <grid-column-end>;
}

Exemplos:

  • grid-column: 1 / 3;

    • Equivalente a: grid-column-start: 1; grid-column-end: 3;
    • O item começa na linha de coluna 1 e termina na linha de coluna 3 (ocupando as colunas 1 e 2).

  • grid-column: 2 / span 2;

    • Equivalente a: grid-column-start: 2; grid-column-end: span 2;
    • O item começa na linha de coluna 2 e ocupa 2 colunas.

  • grid-column: span 3;

    • Equivalente a: grid-column-start: auto; grid-column-end: span 3;
    • O item começa automaticamente e ocupa 3 colunas.

2. grid-row

Este shorthand define grid-row-start e grid-row-end.

Sintaxe:

.grid-item {
  grid-row: <grid-row-start> / <grid-row-end>;
}

Exemplos:

  • grid-row: 1 / 3;

    • Equivalente a: grid-row-start: 1; grid-row-end: 3;
    • O item começa na linha de linha 1 e termina na linha de linha 3 (ocupando as linhas 1 e 2).

  • grid-row: 2 / span 2;

    • Equivalente a: grid-row-start: 2; grid-row-end: span 2;
    • O item começa na linha de linha 2 e ocupa 2 linhas.

  • grid-row: span 3;

    • Equivalente a: grid-row-start: auto; grid-row-end: span 3;
    • O item começa automaticamente e ocupa 3 linhas.

Vantagens dos Shorthands

  • Concisão: Reduz a quantidade de código CSS, tornando-o mais limpo.
  • Legibilidade: Facilita a leitura e o entendimento rápido do posicionamento de um item.
  • Eficiência: Permite definir o posicionamento completo de um item em uma única linha.

Exemplo Prático:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Shorthands Grid Column e Grid Row</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 */
      grid-template-rows: repeat(3, 100px); /* 3 linhas */
      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 shorthands --- */

    .item-1 {
      background-color: lightcoral;
      grid-column: 1 / 3; /* Começa na linha 1, termina na linha 3 (ocupa col 1 e 2) */
      grid-row: 1 / 2;    /* Começa na linha 1, termina na linha 2 (ocupa linha 1) */
    }

    .item-2 {
      background-color: lightgreen;
      grid-column: 4 / 5; /* Começa na linha 4, termina na linha 5 (ocupa col 4) */
      grid-row: 1 / 3;    /* Começa na linha 1, termina na linha 3 (ocupa linhas 1 e 2) */
    }

    .item-3 {
      background-color: lightgoldenrodyellow;
      grid-column: 1 / span 2; /* Começa na linha 1, ocupa 2 colunas */
      grid-row: 3 / span 1;    /* Começa na linha 3, ocupa 1 linha */
    }

    .item-4 {
      background-color: lightsalmon;
      grid-column: 3 / span 2; /* Começa na linha 3, ocupa 2 colunas */
      grid-row: 2 / span 2;    /* Começa na linha 2, ocupa 2 linhas */
    }
  </style>
</head>
<body>
  <h1>Shorthands `grid-column` e `grid-row`</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-5, 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>Este exemplo é idêntico ao anterior, mas utilizando os shorthands <code>grid-column</code> e <code>grid-row</code> para um código mais limpo e conciso.</p>
</body>
</html>

Resultado:

  • O layout será visualmente idêntico ao exemplo da lição anterior, mas o código CSS para posicionar os itens será mais curto e fácil de ler.

Boas Práticas:

  • Prefira os Shorthands: Sempre que possível, use grid-column e grid-row em vez das propriedades *-start e *-end individuais.
  • Entenda a Ordem: Lembre-se que a ordem é sempre start / end.
  • span é seu amigo: A palavra-chave span é muito útil para definir a extensão de um item sem precisar calcular a linha de grade final.
  • Visualização: Continue usando as ferramentas de desenvolvedor do navegador para visualizar as linhas de grade e confirmar o posicionamento dos seus itens.

Os shorthands grid-column e grid-row são ferramentas essenciais para escrever CSS Grid de forma eficiente e elegante, permitindo que você posicione seus itens com clareza e concisão.