Escolher entre Flexbox e Grid

Neste capítulo você vai organizar navegação e cartões com ferramentas adequadas. O objetivo é terminar uma tarefa pequena e conferir seu resultado no Mirante do Mucuripe.

Seu ponto de partida

Estude depois do capítulo 03. Retome a referência se uma experiência anterior ficou alterada. Use o exemplo 04-flex-grid do pacote anexo e copie inicio/ para uma pasta de prática fora do original. A raiz do exemplo é a referência completa desta etapa. Você não precisa copiar arquivos da etapa anterior.

Abra index.html da sua cópia no navegador e o mesmo arquivo num editor de texto simples. Para mídia, ferramenta de conferência e JSON, use o teste HTTP local explicado no README. Abrir ou testar não publica a página.

Como praticar

Leia a explicação e digite ou confira o código indicado. Mude uma coisa. Anote sua previsão antes de salvar e recarregar. Compare o resultado e investigue o erro antes de avançar. Ao terminar cada experiência, restaure somente a mudança indicada, para que a próxima parta dos valores da referência. Você pode parar depois de uma lição.

Flexbox acompanha uma direção principal

Flexbox distribui itens numa direção principal, como a linha de links do menu. Display flex cria esse contexto no pai. Gap reserva espaços entre itens e flex-wrap permite novas linhas. Não use order para tornar o menu visualmente diferente da ordem de leitura: o teclado normalmente segue a ordem do HTML. A necessidade aqui é simples: links lado a lado quando couberem, com quebra quando necessário. Um menu não precisa de uma posição fixa para ser encontrável.

Faça na sua cópia

Confira nav em assets/styles.css. A implementação completa está no pacote de exemplos que acompanha este volume. Confira o trecho no seu contexto antes de mudar.

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

Mude uma coisa e preveja

Troque somente o segundo valor de gap, de 1rem para 1.5rem.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

O espaço horizontal entre os links aumenta; eles ainda podem quebrar para outra linha.

Se não acontecer

Confira o pai nav. Colocar display flex num link muda seus filhos, não distribui os links irmãos.

Grid organiza linhas e colunas

Grid permite definir uma grade para os cartões. Repeat repete uma definição de coluna; fr representa uma fração do espaço restante. Minmax(0, 1fr) permite que a coluna encolha sem impor uma largura mínima baseada em uma palavra grande. A referência deste volume usa duas colunas. A regra de conteúdo ainda precisa permitir quebra de texto. Não confunda a grade com uma tabela de dados: os cartões são atividades independentes, sem relação de cabeçalho e célula.

Faça na sua cópia

Confira .cards na folha. A implementação completa está no pacote de exemplos que acompanha este volume. Confira o trecho no seu contexto antes de mudar.

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

Mude uma coisa e preveja

Troque somente repeat(2 por repeat(1 nessa regra.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

Os cartões ficam numa coluna, mantendo a ordem do HTML. Restaure duas colunas depois.

Se não acontecer

Confira se .cards é a caixa que reúne os articles. Uma grade vazia ou no filho não distribui os cartões.

Escolha pelo resultado que precisa

Flexbox também pode organizar cartões, e Grid também pode alinhar links. A escolha não é uma lei que proíbe alternativas. Ela deve simplificar a tarefa: uma linha de navegação pede distribuição numa direção; cartões em linhas e colunas se beneficiam de uma grade. Observe como a ferramenta reage a um terceiro item. Não ajuste todos os componentes com uma regra genérica em article: esse seletor pode atingir uma região que não deveria entrar na grade. Use o contexto e a classe do grupo.

Faça na sua cópia

Copie um article completo dentro de .cards. A implementação completa está no pacote de exemplos que acompanha este volume. Confira o trecho no seu contexto antes de mudar.

<article class="card">
  <h3>Conversa às 16h</h3>
  <p>Conte o que mudou na sua prática.</p>
</article>

Mude uma coisa e preveja

Acrescente somente esse terceiro cartão ao grupo.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

A grade ganha uma segunda linha. Não é necessário posicionar o terceiro cartão com coordenadas.

Se não acontecer

Confira a tag de fechamento do grupo. Um article fora de .cards fica fora da grade.

A captura mostra uma parte da referência. Abra o exemplo para conferir a página inteira. Uma experiência temporária pode produzir outra aparência; restaure os valores antes de comparar.

Atividades para fazer antes das respostas

Use uma nova cópia da base. Tente primeiro; depois compare seus resultados com os comentários.

1. Acrescente um link fictício no menu e confira uma janela estreita.

2. Acrescente um terceiro cartão completo à grade.

3. Explique sua escolha de Flexbox e Grid neste projeto.

Respostas comentadas

Compare o que você previu com o que observou. Uma solução diferente pode funcionar se mantiver o conteúdo e a tarefa acessíveis.

1. Com flex-wrap, os links passam para outra linha quando o espaço termina. Preserve texto, foco e ordem do HTML.

2. O terceiro item participa da grade quando está dentro de .cards. A ordem de leitura não depende de posição absoluta.

3. Flexbox simplifica a distribuição do menu; Grid simplifica linhas e colunas dos cartões. A justificativa parte do arranjo necessário.

Quando seguir

Você organiza os dois grupos e explica como cada ferramenta responde a um item novo. Se ainda houver dúvida, repita somente a experiência que precisa esclarecer.

O arquivo completo

Referência do exemplo 04-flex-grid, reproduzida aqui para que você possa conferir sem sair da página.

index.html

<!doctype html>
<html lang="pt-BR">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mirante do Mucuripe | Prática de front-end</title><link rel="stylesheet" href="assets/styles.css"></head>
<body><a class="pular" href="#conteudo">Pular para o conteúdo</a>
<header><p>Um pouco além do Webdev</p><h1>Mirante do Mucuripe</h1><p class="ficticio">Espaço cultural fictício em Fortaleza.</p>
<nav aria-label="Nesta página"><a href="#sobre">Sobre</a><a href="#agenda">Agenda</a><a href="#visitar">Orientações</a></nav></header>
<main id="conteudo" tabindex="-1"><section class="hero" aria-labelledby="sobre"><h2 id="sobre">Um lugar para aprender e criar</h2><p class="selo">Projeto fictício</p><p>O Mirante do Mucuripe reúne leitura, oficinas e conversas em Fortaleza.</p><p>Esta página é uma prática de curso. Não representa um espaço real.</p></section><section aria-labelledby="agenda"><h2 id="agenda">Agenda de prática</h2><p>Horários inventados, sem reserva ou inscrição real.</p><div class="cards"><article class="card"><h3>Leitura às 10h</h3><p>Escolha um texto curto e converse sobre ele.</p></article><article class="card"><h3>Oficina às 14h</h3><p>Experimente uma mudança pequena no seu projeto.</p></article></div></section><section aria-labelledby="visitar"><h2 id="visitar">Antes de visitar</h2><p>Local fictício em Fortaleza. A descrição é apenas um exercício, sem endereço real.</p><ul><li>Leia o horário na agenda.</li><li>Confira a descrição da atividade.</li></ul></section></main><footer><p>Mirante do Mucuripe. Conteúdo fictício para estudo.</p></footer>
</body></html>