Pular para o conteúdo
murad.guide

A Web Aberta

Capítulo 41

Grade reutilizável

6 min de leitura 1.121 palavras 2 gravuras

Este capítulo transforma a Oficina Costeira numa grade que você reaproveita: linha, coluna, vão e ponto de quebra. A Oficina Costeira é um coletivo fictício de design em João Pessoa. Este volume tem 52 capítulos. Esta é a 41.

O exemplo está em exemplos/41-grade-reutilizavel/. Você já viu Flexbox e CSS Grid em volumes anteriores. Aqui o assunto é o sistema: as mesmas classes em várias páginas. O ciclo: ler, copiar, mudar uma coisa, prever, recarregar, conferir.

O que você vai aprender

Recipiente e peça

Uma grade tem dois papéis. O recipiente organiza. A peça ocupa uma fatia.

No HTML isso vira dois nomes estáveis. Na Oficina Costeira usamos .cards como recipiente e .card como peça. Você pode chamar de .grade e .unidade. O nome importa menos do que a regra: o pai dispõe, o filho não precisa saber da página inteira.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Projetos — Oficina Costeira</title>
    <link rel="stylesheet" href="assets/stylesheets/main.css">
  </head>
  <body>
    <main id="conteudo">
      <h1>Projetos</h1>
      <div class="cards">
        <article class="card">
          <h2>Farol da Restinga</h2>
          <p>Identidade fictícia para um festival de fotografia.</p>
        </article>
        <article class="card">
          <h2>Guia da Lagoa</h2>
          <p>Páginas de um guia impresso adaptado para a Web.</p>
        </article>
        <article class="card">
          <h2>Ateliê da Pedra</h2>
          <p>Cartaz e site de uma exposição temporária.</p>
        </article>
      </div>
    </main>
  </body>
</html>

Três artigos. O mesmo molde. Se amanhã entrar um quarto projeto fictício, você copia o article, não inventa um layout novo.

Mude só o título do segundo card para Guia da Orla. Preveja o texto. Recarregue. Confira. A grade não deve desmontar.

Erro comum: colocar largura mágica em cada card (width: 372px). A peça rígida quebra quando a janela muda.

Flexbox como grade

Flexbox alinha peças num eixo. Com flex-wrap: wrap, as peças descem quando não cabem. É grade o bastante para cartões e menus.

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.card {
  flex: 1 1 16rem;
  background: #fff;
  padding: 1.25rem;
  border: 1px solid #d9d3c7;
}

flex: 1 1 16rem diz: pode crescer, pode encolher, base de 16 rem. Em tela estreita cada card ocupa a linha. Em tela larga cabem dois ou três.

O menu da Oficina Costeira já é flex:

.menu {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
}

Não use flex para a página inteira se Grid resolver melhor o mapa (coluna de navegação + miolo). Flex brilha em faixas e conjuntos de peças irmãs.

Mude só a base 16rem para 20rem. Preveja: cabem menos cards por linha. Recarregue. Estreite e alargue a janela. Confira.

Erro comum: flex-wrap: nowrap numa grade de cartões. Na tela estreita as peças esmagam o texto ou saem da janela.

CSS Grid como grade

Grid pensa em linhas e colunas ao mesmo tempo. Para a home da Oficina Costeira, três cards em tela larga cabem numa frase:

.cards {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

1fr reparte o espaço livre em partes iguais. repeat(3, 1fr) pede três colunas. A media query começa na tela pequena: uma coluna. Depois duas. Depois três. É o mesmo hábito do capítulo de media queries.

Página com miolo e faixa lateral:

.pagina {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .pagina {
    grid-template-columns: 12rem 1fr;
  }
}

Mude só repeat(3, 1fr) para repeat(4, 1fr). Preveja quatro colunas na janela larga. Recarregue. Confira. Se os cards ficarem estreitos demais, volte para três. O conteúdo fictício da Oficina Costeira não precisa de doze colunas.

Erro comum: misturar float para “completar” a grade. Float neste volume ficou para imagem ao lado de um parágrafo, não para o esqueleto da página.

Resumo dos conceitos: coluna, gap, 12

O vão é gap, não margem de um lado só

Antigas grades inventavam porcentagem para a coluna e outra porcentagem para o espaço. Um pixel a mais e a última peça caía.

Hoje o recipiente declara gap. Flex e Grid entendem. O vão fica entre as peças, não depois da última.

.cards {
  display: grid;
  gap: 1rem 1.25rem;
}

O primeiro valor é o vão entre linhas. O segundo, entre colunas. Se escrever um só, vale nos dois eixos.

Evite width: 33.333% mais margin-right: 1% em três colunas. A conta quebra. Se ainda precisar de fatia fixa, minmax é mais honesto:

.cards {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

auto-fit coloca quantas colunas couberem. Cada uma tem no mínimo 16 rem. O resto se reparte.

Mude só 16rem para 12rem. Preveja mais colunas na mesma largura. Recarregue. Confira.

Erro comum: gap no filho em vez do pai. A propriedade do vão pertence ao recipiente.

Reutilizar, não copiar a página

A grade reutilizável é um combinado de classes. A home, projetos e a agenda usam .cards. O CSS mora em main.css. Você não cola um bloco novo a cada HTML.

Quando duas páginas pedirem o mesmo mapa, extraia. Quando só a agenda tiver uma tabela, deixe a tabela fora da grade de cards.

Checklist curto:

Não precisa de um arquivo grid.css separado neste volume. Um bloco comentado em main.css já organiza.

Mude só o HTML: tire a classe .cards do recipiente. Preveja: os artigos empilham com a largura do texto. Recarregue. Confira. Recoloque a classe. A disposição volta.

Erro comum: criar .card-home, .card-projetos, .card-agenda com o mesmo CSS. Uma classe .card basta.

Ferramenta pronta é extra, não o eixo

Existem geradores que cospem dezenas de classes (.unit-1-2, .unit-1-3). Um deles se chama Gridifier. Você não precisa dele para terminar a Oficina Costeira.

O caminho deste volume é CSS nativo: display, gap, repeat, minmax, media query. Se um dia você abrir um gerador, leia o CSS que ele emite. Copie só o que entender. Não cole um arquivo minificado que você não sabe desligar.

O mesmo vale para “framework de grade” antigo baseado em float. Não volte atrás. Flex e Grid já estão no navegador.

Sirva o exemplo só em localhost:

python -m http.server 8769 --bind 127.0.0.1 --directory curso

Abra http://127.0.0.1:8769/exemplos/41-grade-reutilizavel/. Encerre com Ctrl+C. Não use 0.0.0.0. Não publique.

Resumo dos conceitos: 12, gap, coluna

Atividades

  1. Quem declara display: grid: o recipiente ou cada card?
  2. O que muda se você tirar flex-wrap: wrap de um menu em flex?
  3. Reescreva, em uma linha de CSS, três colunas iguais com vão de 1rem.
  4. Por que este volume não exige Gridifier?
  5. float deve montar a grade da home? Onde o volume ainda aceita float?

Respostas comentadas

  1. O recipiente (.cards ou .pagina). As peças só ocupam células.
  2. Os itens tentam ficar numa linha só. Em tela estreita o menu estoura ou esmaga o texto.
  3. .cards { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); }
  4. Porque Flex e Grid nativos já fazem a grade. Ferramenta pronta é opcional e só depois de você ler o CSS.
  5. Não. Float neste projeto só acompanha imagem ao lado de parágrafo, como em projetos.html.

Referências

O arquivo completo

Referência do exemplo 41-grade-reutilizavel, reproduzida aqui para que você possa conferir sem sair da página.

assets/javascript/simulacao.js

const form=document.querySelector("#simulacao");if(form){form.querySelector("button[type=submit]").disabled=false;form.addEventListener("submit",event=>{event.preventDefault();document.querySelector("#retorno").textContent="Simulação concluída. Nada foi enviado ou guardado.";});}