Propriedade grid-template-rows: Definindo as linhas

Crie as linhas do seu layout grid, especificando seus tamanhos.

Assim como grid-template-columns define a estrutura vertical do seu grid, a propriedade grid-template-rows é aplicada ao Contêiner Grid para especificar o número de linhas e o tamanho de cada uma delas.

Pense no grid-template-rows como o "arquiteto" que desenha as paredes horizontais da sua casa (o Contêiner Grid). Você decide quantos andares (linhas) terá e qual será a altura de cada um.

Como funciona grid-template-rows

Você define os tamanhos das linhas listando-os, separados por espaços. Cada valor representa a altura de uma linha.

Valores Comuns:

A propriedade grid-template-rows aceita os mesmos tipos de valores que grid-template-columns:

  1. Unidades de Medida Fixas (px, em, rem, %):

    • Definem alturas fixas para suas linhas.
    • Ex: grid-template-rows: 50px 100px 75px; (cria 3 linhas com essas alturas fixas).
    • Ex: grid-template-rows: 30% 70%; (cria 2 linhas que ocupam porcentagens da altura do contêiner).

  2. Unidade fr (Fractional Unit):

    • fr significa "fraction" (fração). 1fr representa uma parte do espaço disponível.
    • Ex: grid-template-rows: 1fr 1fr 1fr; (cria 3 linhas de altura igual, dividindo o espaço disponível igualmente).
    • Ex: grid-template-rows: 1fr 2fr; (cria 2 linhas; a segunda linha será o dobro da altura da primeira).
    • Ex: grid-template-rows: 50px 1fr; (cria uma linha de 50px, e o espaço restante é ocupado pela segunda linha).

  3. auto:

    • A linha se ajusta automaticamente ao tamanho do conteúdo que ela contém.
    • Ex: grid-template-rows: auto 1fr auto; (as linhas das extremidades se ajustam ao conteúdo, e a linha do meio ocupa o espaço restante).

  4. min-content:

    • A linha terá a menor altura possível sem quebrar o conteúdo.

  5. max-content:

    • A linha terá a altura necessária para exibir todo o conteúdo em uma única linha, sem quebras.

  6. minmax(min, max):

    • Define um intervalo de tamanho para a linha. A linha terá no mínimo min e no máximo max.
    • Ex: grid-template-rows: minmax(80px, 1fr) 150px; (a primeira linha terá no mínimo 80px e no máximo 1 fração do espaço disponível, a segunda terá 150px).

Exemplo Prático:

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

    .grid-container {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr; /* 3 colunas de largura igual para este exemplo */
      gap: 10px;
      background-color: #e0e0e0;
      border: 2px solid #333;
      padding: 10px;
      width: 80%;
      height: 400px; /* Altura fixa para o contêiner para ver o efeito das linhas */
      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 grid-template-rows --- */

    .container-fixed-rows {
      grid-template-rows: 80px 120px 50px; /* 3 linhas com alturas fixas */
    }

    .container-fr-rows {
      grid-template-rows: 1fr 1fr 1fr; /* 3 linhas de altura igual */
    }

    .container-fr-ratio-rows {
      grid-template-rows: 1fr 2fr 0.5fr; /* 3 linhas com proporções diferentes */
    }

    .container-mixed-rows {
      grid-template-rows: 50px 1fr auto; /* Fixo, flexível, auto-ajustável */
    }

    .container-minmax-rows {
      grid-template-rows: minmax(60px, 100px) 1fr; /* Linha 1 entre 60px e 100px, Linha 2 flexível */
    }

    .container-content-rows {
      grid-template-rows: min-content max-content 1fr; /* Min-content, Max-content, flexível */
    }
  </style>
</head>
<body>
  <h1>Propriedade `grid-template-rows`</h1>

  <h2>Linhas com Alturas Fixas (`80px 120px 50px`)</h2>
  <div class="grid-container container-fixed-rows">
    <div class="grid-item">Item 1</div>
    <div class="grid-item">Item 2</div>
    <div class="grid-item">Item 3</div>
    <div class="grid-item">Item 4</div>
    <div class="grid-item">Item 5</div>
    <div class="grid-item">Item 6</div>
    <div class="grid-item">Item 7</div>
    <div class="grid-item">Item 8</div>
    <div class="grid-item">Item 9</div>
  </div>

  <h2>Linhas com `fr` (Fração Igual: `1fr 1fr 1fr`)</h2>
  <div class="grid-container container-fr-rows">
    <div class="grid-item">Item 1</div>
    <div class="grid-item">Item 2</div>
    <div class="grid-item">Item 3</div>
    <div class="grid-item">Item 4</div>
    <div class="grid-item">Item 5</div>
    <div class="grid-item">Item 6</div>
    <div class="grid-item">Item 7</div>
    <div class="grid-item">Item 8</div>
    <div class="grid-item">Item 9</div>
  </div>

  <h2>Linhas com `fr` (Proporções Diferentes: `1fr 2fr 0.5fr`)</h2>
  <div class="grid-container container-fr-ratio-rows">
    <div class="grid-item">Item 1</div>
    <div class="grid-item">Item 2</div>
    <div class="grid-item">Item 3</div>
    <div class="grid-item">Item 4</div>
    <div class="grid-item">Item 5</div>
    <div class="grid-item">Item 6</div>
    <div class="grid-item">Item 7</div>
    <div class="grid-item">Item 8</div>
    <div class="grid-item">Item 9</div>
  </div>

  <h2>Linhas Mistas (`50px 1fr auto`)</h2>
  <div class="grid-container container-mixed-rows">
    <div class="grid-item">Item Fixo</div>
    <div class="grid-item">Item Flexível</div>
    <div class="grid-item">Item Auto Ajuste com Conteúdo Longo</div>
    <div class="grid-item">Outro Fixo</div>
    <div class="grid-item">Outro Flexível</div>
    <div class="grid-item">Outro Auto</div>
    <div class="grid-item">Mais um Fixo</div>
    <div class="grid-item">Mais um Flexível</div>
    <div class="grid-item">Mais um Auto</div>
  </div>

  <h2>Linhas com `minmax(min, max)` (`minmax(60px, 100px) 1fr`)</h2>
  <div class="grid-container container-minmax-rows">
    <div class="grid-item">Item MinMax</div>
    <div class="grid-item">Item Flexível</div>
    <div class="grid-item">Outro MinMax</div>
    <div class="grid-item">Outro Flexível</div>
    <div class="grid-item">Mais um MinMax</div>
    <div class="grid-item">Mais um Flexível</div>
  </div>

  <h2>Linhas com `min-content` e `max-content` (`min-content max-content 1fr`)</h2>
  <div class="grid-container container-content-rows">
    <div class="grid-item">Pequeno</div>
    <div class="grid-item">Conteúdo Muito Longo Que Não Quebra</div>
    <div class="grid-item">Flexível</div>
    <div class="grid-item">Pequeno 2</div>
    <div class="grid-item">Outro Conteúdo Muito Longo Que Não Quebra</div>
    <div class="grid-item">Flexível 2</div>
    <div class="grid-item">Pequeno 3</div>
    <div class="grid-item">Mais Conteúdo Muito Longo Que Não Quebra</div>
    <div class="grid-item">Flexível 3</div>
  </div>
</body>
</html>

Resultado:

  • Você verá vários contêineres grid, cada um demonstrando um tipo diferente de definição de linha.
  • Observe como as linhas se adaptam ou mantêm sua altura de acordo com os valores de grid-template-rows.
  • Redimensione a janela do navegador para ver o efeito das unidades fr e minmax na responsividade.

Boas Práticas:

  • Defina suas linhas: Juntamente com grid-template-columns, grid-template-rows é essencial para construir a estrutura bidimensional do seu grid.
  • Use fr para flexibilidade: A unidade fr é tão útil para linhas quanto para colunas, garantindo que suas linhas se adaptem ao espaço vertical disponível.
  • Altura do Contêiner: Para que as unidades fr em grid-template-rows tenham um efeito visível, o Contêiner Grid precisa ter uma altura definida (ex: height: 400px; ou min-height: 100vh;). Caso contrário, as linhas fr se ajustarão ao conteúdo, como auto.
  • Combine unidades: Misture unidades fixas (px), porcentagens e fr para criar layouts complexos e flexíveis.
  • minmax() para controle: Use minmax() para garantir que suas linhas não fiquem nem muito pequenas nem muito grandes, oferecendo um controle responsivo robusto.
  • Visualização: Use as ferramentas de desenvolvedor do navegador para visualizar as linhas de grade e os tamanhos das linhas. Isso é crucial para entender e depurar seu layout.

Dominar grid-template-rows é o segundo passo para desenhar a estrutura vertical do seu layout Grid, complementando o que você aprendeu sobre grid-template-columns.