Unidade fr: A unidade 'fracionária' para grids flexíveis

Você já aprendeu a definir o tamanho das suas colunas e linhas usando unidades fixas (como px), porcentagens (%) e auto. Agora, prepare-se para conhecer a estrela do show quando o assunto é flexibilidade no CSS Grid: a unidade fr (de "fraction" ou "fração").

A unidade fr é exclusiva do CSS Grid e permite que você defina o tamanho de uma ou mais linhas/colunas como uma fração do espaço disponível no Contêiner Grid. É o que torna os layouts Grid tão dinâmicos e responsivos.

Pense na unidade fr como uma "fatia de pizza" do espaço que sobrou. Você pode dizer: "Eu quero que esta coluna pegue 1 fatia, e aquela outra pegue 2 fatias". O Grid vai calcular o tamanho de cada fatia com base no espaço que ainda não foi ocupado por elementos de tamanho fixo.

Como funciona a unidade `fr`

A unidade fr é usada nas propriedades grid-template-columns e grid-template-rows.

Distribuição Proporcional:
- Quando você usa fr, o Grid primeiro calcula o espaço total disponível no contêiner.
- Em seguida, ele subtrai o espaço ocupado por quaisquer colunas/linhas com tamanhos fixos (px, %, etc.).
- O espaço restante é então dividido entre as colunas/linhas que usam a unidade fr, de acordo com suas proporções.
Exemplos de Uso:
- grid-template-columns: 1fr 1fr 1fr;
  - Cria 3 colunas de largura igual. O espaço disponível é dividido em 3 partes iguais, e cada coluna recebe 1 parte.
- grid-template-columns: 1fr 2fr 1fr;
  - Cria 3 colunas. O espaço disponível é dividido em 4 partes (1 + 2 + 1 = 4).
  - A primeira coluna recebe 1 parte.
  - A segunda coluna recebe 2 partes (o dobro da primeira e da terceira).
  - A terceira coluna recebe 1 parte.
- grid-template-columns: 100px 1fr 2fr;
  - Cria 3 colunas.
  - Primeiro, a primeira coluna ocupa seus 100px.
  - O espaço restante no contêiner é então dividido em 3 partes (1 + 2 = 3).
  - A segunda coluna recebe 1 parte desse espaço restante.
  - A terceira coluna recebe 2 partes desse espaço restante.
- grid-template-rows: 50px 1fr auto;
  - Cria 3 linhas.
  - A primeira linha tem 50px.
  - A terceira linha (auto) se ajusta ao conteúdo.
  - O espaço restante (após a linha de 50px e a linha auto) é ocupado pela segunda linha (1fr).

Vantagens da unidade `fr`

Responsividade Intrínseca: Layouts criados com fr se adaptam automaticamente a diferentes tamanhos de tela, pois as colunas/linhas se ajustam ao espaço disponível.
Simplicidade: É muito mais fácil e intuitivo definir proporções de espaço do que calcular porcentagens complexas ou usar calc().
Combinação Poderosa: Pode ser combinada com unidades fixas (px), auto, min-content, max-content e minmax() para criar layouts extremamente flexíveis e controlados.

Exemplo Prático:

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

    .grid-container {
      display: grid;
      gap: 10px;
      background-color: #e0e0e0;
      border: 2px solid #333;
      padding: 10px;
      width: 90%; /* Contêiner com largura flexível */
      height: 300px; /* Contêiner com altura flexível */
      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 com unidade fr --- */

    .container-equal-fr {
      grid-template-columns: 1fr 1fr 1fr; /* 3 colunas iguais */
      grid-template-rows: 1fr 1fr; /* 2 linhas iguais */
    }

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

    .container-mixed-fr {
      grid-template-columns: 100px 1fr 2fr; /* Fixo, 1fr, 2fr */
      grid-template-rows: 50px 1fr auto; /* Fixo, 1fr, auto */
    }

    .container-minmax-fr {
      grid-template-columns: minmax(100px, 1fr) 2fr; /* Minmax e fr */
      grid-template-rows: minmax(50px, 1fr) 1fr; /* Minmax e fr */
    }
  </style>
</head>
<body>
  <h1>Unidade `fr` no CSS Grid</h1>

  <h2>Colunas e Linhas Iguais (`1fr 1fr 1fr` / `1fr 1fr`)</h2>
  <div class="grid-container container-equal-fr">
    <div class="grid-item">1fr</div>
    <div class="grid-item">1fr</div>
    <div class="grid-item">1fr</div>
    <div class="grid-item">1fr</div>
    <div class="grid-item">1fr</div>
    <div class="grid-item">1fr</div>
  </div>
  <p>Redimensione a janela para ver as colunas e linhas se ajustarem igualmente.</p>

  <h2>Colunas e Linhas com Proporções Diferentes (`1fr 2fr 0.5fr` / `1fr 3fr`)</h2>
  <div class="grid-container container-ratio-fr">
    <div class="grid-item">1fr</div>
    <div class="grid-item">2fr</div>
    <div class="grid-item">0.5fr</div>
    <div class="grid-item">1fr</div>
    <div class="grid-item">2fr</div>
    <div class="grid-item">0.5fr</div>
  </div>
  <p>Observe como a coluna do meio e a linha de baixo são maiores proporcionalmente.</p>

  <h2>Colunas e Linhas Mistas (`100px 1fr 2fr` / `50px 1fr auto`)</h2>
  <div class="grid-container container-mixed-fr">
    <div class="grid-item">100px</div>
    <div class="grid-item">1fr</div>
    <div class="grid-item">2fr</div>
    <div class="grid-item">50px</div>
    <div class="grid-item">1fr</div>
    <div class="grid-item">Auto (Conteúdo Longo)</div>
  </div>
  <p>A coluna de 100px e a linha de 50px mantêm seu tamanho, e o espaço restante é dividido pelas unidades `fr`.</p>

  <h2>Colunas e Linhas com `minmax()` e `fr` (`minmax(100px, 1fr) 2fr` / `minmax(50px, 1fr) 1fr`)</h2>
  <div class="grid-container container-minmax-fr">
    <div class="grid-item">MinMax 1fr</div>
    <div class="grid-item">2fr</div>
    <div class="grid-item">MinMax 1fr</div>
    <div class="grid-item">2fr</div>
  </div>
  <p>A primeira coluna/linha tem um tamanho mínimo e máximo, e a segunda ocupa o restante.</p>
</body>
</html>

Resultado:

Você verá vários contêineres grid, cada um demonstrando o poder da unidade fr em diferentes configurações.
Redimensione a janela do navegador para ver a mágica da unidade fr em ação. As colunas e linhas se ajustarão dinamicamente ao espaço disponível.

Boas Práticas:

Priorize fr para layouts responsivos: Sempre que precisar de colunas ou linhas que se adaptem ao espaço, use fr.
Combine com px e auto: Para elementos que precisam de um tamanho mínimo ou fixo (como uma barra lateral ou um cabeçalho), combine px ou auto com fr para que o fr ocupe o espaço restante.
Entenda o "espaço disponível": Lembre-se que fr distribui o espaço que sobra depois que os elementos de tamanho fixo e auto foram acomodados.
minmax() com fr: A combinação de minmax() com fr é extremamente poderosa para criar colunas/linhas que têm um tamanho mínimo garantido, mas que também podem crescer para preencher o espaço.

A unidade fr é um dos pilares do CSS Grid para criar layouts verdadeiramente flexíveis e responsivos. Dominá-la é essencial para aproveitar todo o potencial do Grid.

Como funciona a unidade fr

Vantagens da unidade fr

Exemplo Prático:

Boas Práticas:

Como funciona a unidade `fr`

Vantagens da unidade `fr`