Projeto Grid: construa um painel responsivo

O projeto final é um painel de livraria com navegação, indicadores e catálogo. Você usará Grid para a estrutura bidimensional e Flexbox apenas nos pequenos grupos que seguem uma linha. A ferramenta muda quando o problema muda.

Pense num prédio com planta e móveis. Grid define as regiões do prédio: corredor, sala e estoque. Flexbox organiza objetos dentro de uma região, como botões numa prateleira. No CSS, o painel e o catálogo são malhas; cabeçalho e conteúdo do cartão são sequências. O limite é que as duas ferramentas conseguem imitar uma à outra em casos simples. A escolha vem da relação que você quer declarar, não de uma proibição técnica.

Faça a estrutura maior com áreas

Comece com sidebar e conteúdo:

.painel {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  grid-template-areas:
    "topo topo"
    "menu principal";
}

.topo { grid-area: topo; }
.menu { grid-area: menu; }
.principal { grid-area: principal; min-width: 0; }

minmax(0, 1fr) permite que o conteúdo principal encolha sem ser empurrado por um mínimo intrínseco inesperado. Em tela estreita, troque o mapa:

@media (max-width: 38rem) {
  .painel {
    grid-template-columns: 1fr;
    grid-template-areas:
      "topo"
      "menu"
      "principal";
  }
}

O HTML permanece na ordem de leitura; apenas a relação espacial muda.

Deixe o espaço escolher a quantidade de cartões

O catálogo não precisa de uma media query para duas, três e quatro colunas:

.catalogo {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
  gap: 1rem;
}

auto-fit calcula quantos tracks cabem. minmax() pede um tamanho mínimo de até 12rem, limitado a 100% quando o próprio container for menor, e permite que cada coluna cresça até uma fração. O resultado é fluido: a quantidade muda quando o conteúdo deixa ou passa a caber.

auto-fill também cria repetições, mas pode preservar tracks vazios no espaço disponível; auto-fit colapsa os vazios e deixa os existentes se expandirem. Com todos os tracks preenchidos, os resultados muitas vezes parecem iguais.

Para enxergar a diferença, deixe apenas dois cartões num container largo e ative o overlay. Com auto-fill, vagas vazias continuam participando da malha; com auto-fit, elas colapsam e os cartões podem usar a sobra. O termo “fit” não significa reduzir o cartão abaixo do mínimo. minmax() ainda estabelece o piso aceito para cada repetição.

Combine sem transformar tudo em Grid

Dentro de cada cartão, título e estoque formam uma linha:

.catalogo article {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
}

Esse Flexbox interno não compete com a grade externa. Cada elemento resolve uma relação diferente. O erro comum é usar auto-fit com mínimo maior que o viewport e culpar Grid pelo overflow. Limite o mínimo ou adapte-o, como no exemplo. Outro erro é mudar áreas para uma ordem diferente do HTML.

Também teste com mais conteúdo do que aparece no exemplo. Uma grade responsiva que funciona só com quatro cartões conhecidos ainda não comprovou o auto-placement. Adicione, remova e aumente títulos; a malha precisa receber quantidade variável sem seletores por posição.

Personalize o laboratório, inclua seis livros e teste 320, 768 e 1280 pixels. Use Tab, zoom de 200% e um título longo. A missão termina sem scroll horizontal, sem conteúdo encoberto, com foco coerente e colunas escolhidas pelo espaço. Explique duas decisões: por que o catálogo é Grid e por que o interior do cartão é Flexbox. Essa comparação fecha o curso com um critério que você poderá usar em layouts novos.