Propriedade grid-template-columns: Definindo as colunas

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

Depois de transformar um elemento em um Contêiner Grid com display: grid;, o próximo passo crucial é definir a estrutura das suas colunas. É para isso que serve a propriedade grid-template-columns.

A propriedade grid-template-columns é aplicada ao Contêiner Grid e permite que você especifique o número de colunas e o tamanho de cada uma delas.

Pense no grid-template-columns como o "arquiteto" que desenha as divisões verticais do seu layout. Você decide quantas colunas quer e qual a largura de cada uma.

Como funciona grid-template-columns

Você define os tamanhos das colunas listando-os, separados por espaços. Cada valor representa a largura de uma coluna.

Valores Comuns:

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

    • Você pode definir larguras fixas para suas colunas.
    • Ex: grid-template-columns: 100px 200px 50px; (cria 3 colunas com essas larguras fixas).
    • Ex: grid-template-columns: 25% 50% 25%; (cria 3 colunas que ocupam porcentagens da largura do contêiner).

  2. Unidade fr (Fractional Unit):

    • Esta é uma unidade exclusiva do Grid e é incrivelmente poderosa para layouts flexíveis.
    • fr significa "fraction" (fração). 1fr representa uma parte do espaço disponível.
    • Ex: grid-template-columns: 1fr 1fr 1fr; (cria 3 colunas de largura igual, dividindo o espaço disponível igualmente).
    • Ex: grid-template-columns: 1fr 2fr 1fr; (cria 3 colunas; a segunda coluna será o dobro da largura da primeira e da terceira).
    • Ex: grid-template-columns: 100px 1fr 2fr; (cria uma coluna de 100px, e o espaço restante é dividido em 3 partes, com a segunda coluna pegando 1 parte e a terceira pegando 2 partes).

  3. auto:

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

  4. min-content:

    • A coluna terá a menor largura possível sem quebrar o conteúdo (ou seja, a largura da palavra mais longa ou do elemento mais largo que não pode ser quebrado).

  5. max-content:

    • A coluna terá a largura 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 coluna. A coluna terá no mínimo min e no máximo max.
    • Ex: grid-template-columns: minmax(100px, 1fr) 200px; (a primeira coluna terá no mínimo 100px e no máximo 1 fração do espaço disponível, a segunda terá 200px).

Exemplo Prático:

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

    .grid-container {
      display: grid;
      /* grid-template-rows: 100px 100px; */ /* Definindo linhas para melhor visualização */
      gap: 10px;
      background-color: #e0e0e0;
      border: 2px solid #333;
      padding: 10px;
      width: 90%; /* Contêiner mais largo para ver o efeito das colunas */
      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;
      min-height: 50px; /* Altura mínima para os itens */
    }

    /* --- Exemplos de grid-template-columns --- */

    .container-fixed {
      grid-template-columns: 100px 200px 150px; /* 3 colunas com larguras fixas */
    }

    .container-fr {
      grid-template-columns: 1fr 1fr 1fr; /* 3 colunas de largura igual */
    }

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

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

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

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

  <h2>Colunas com Larguras Fixas (`100px 200px 150px`)</h2>
  <div class="grid-container container-fixed">
    <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>

  <h2>Colunas com `fr` (Fração Igual: `1fr 1fr 1fr`)</h2>
  <div class="grid-container container-fr">
    <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>

  <h2>Colunas com `fr` (Proporções Diferentes: `1fr 2fr 0.5fr`)</h2>
  <div class="grid-container container-fr-ratio">
    <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>

  <h2>Colunas Mistas (`100px 1fr auto`)</h2>
  <div class="grid-container container-mixed">
    <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>

  <h2>Colunas com `minmax(min, max)` (`minmax(100px, 200px) 1fr`)</h2>
  <div class="grid-container container-minmax">
    <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>

  <h2>Colunas com `min-content` e `max-content` (`min-content max-content 1fr`)</h2>
  <div class="grid-container container-content">
    <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>
</body>
</html>

Resultado:

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

Boas Práticas:

  • Sempre defina suas colunas: Depois de display: grid;, grid-template-columns é geralmente a próxima propriedade a ser definida para estruturar seu layout.
  • Use fr para flexibilidade: A unidade fr é a melhor amiga da responsividade no Grid. Ela garante que suas colunas se adaptem ao espaço disponível.
  • Combine unidades: Não tenha medo de misturar unidades fixas (px), porcentagens e fr para criar layouts complexos e flexíveis.
  • minmax() para controle: Use minmax() para garantir que suas colunas 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 colunas. Isso é crucial para entender e depurar seu layout.

Dominar grid-template-columns é o primeiro passo para desenhar a estrutura horizontal do seu layout Grid. Nas próximas lições, você aprenderá a definir as linhas e a usar atalhos.