Quando Flexbox basta e quando falta Grid

Neste capítulo você vai escolher Flexbox para uma dimensao e preparar a chegada da grade. O projeto de estudo é a Vitrine da Aurora, um espaço cultural fictício no Recife.

Seu ponto de partida

Você já sabe abrir HTML e ligar uma folha CSS. Se ainda faltar essa base, use um curso introdutório de HTML e CSS antes. O exemplo deste capítulo é 07-flex-ou-grid, no pacote que acompanha o volume. Trabalhe sobre uma cópia da pasta inicio/ e preserve o original; a versão de referência fica na raiz do exemplo.

Abra index.html da cópia no navegador e o mesmo arquivo num editor de texto. Abrir ou testar não publica a página.

Como praticar

Leia, confira o código, mude uma coisa, preveja, salve, recarregue e confira. Investigue o erro antes de avançar. Ao terminar cada experiência, restaure a mudança pedida quando o capítulo indicar.

Uma dimensão

Flexbox brilha em uma dimensão: uma linha ou uma coluna. Cabeçalhos, toolbars e listas curtas caem bem.

Faça na sua cópia

Confirme que .topo usa flex e .obras ainda não usa grid. A implementação completa está no pacote de exemplos que acompanha este volume.

.topo { display: flex; }
.obras { display: flex; flex-direction: column; }

Mude uma coisa e preveja

Deixe obras em column e acrescente um sétimo item li na cópia.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

A lista cresce em altura. Não há colunas ainda.

Se não acontecer

Não force width percentuais em cada obra para fingir grade.

Duas dimensões pedem Grid

Quando você precisa controlar linhas e colunas ao mesmo tempo, Grid encaixa melhor. A próxima série de capítulos trata disso.

Faça na sua cópia

Leia o aviso na página de referência. A implementação completa está no pacote de exemplos que acompanha este volume.

<p class="aviso-layout">…</p>

Mude uma coisa e preveja

Reescreva o aviso com suas palavras, mantendo a ideia.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

O texto muda; o layout do topo permanece em Flexbox.

Se não acontecer

Não apague a classe aviso-layout se quiser o estilo da borda.

Escolha consciente

Não troque tudo para Grid por moda. Mantenha Flexbox onde uma dimensão resolve. Misture os dois na mesma página quando fizer sentido.

Faça na sua cópia

Liste mentalmente: topo = flex; obras = próximo passo grid. A implementação completa está no pacote de exemplos que acompanha este volume.

topo → flex
obras → grid (próximas capítulos)

Mude uma coisa e preveja

Anote no README da cópia essa decisão em uma frase.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

Você deixa um registro curto para si. A página não precisa mudar.

Se não acontecer

O README do exemplo original pode ser só leitura; use o da cópia.

Atividades

Faça na cópia. Não olhe as respostas antes de tentar.

1. Explique com suas palavras o objetivo: escolher Flexbox para uma dimensao e preparar a chegada da grade.
2. Faça uma mudança diferente da lição e diga o que esperava versus o que viu.
3. Em tela estreita (cerca de 320px) ou zoom 200%, anote o que ainda funciona e o que aperta.

Critério de avanço

Você avança quando escolher Flexbox para uma dimensao e preparar a chegada da grade.

Respostas comentadas

Atividade 1

O objetivo amarra a etapa ao resultado visível na Vitrine; sem isso a propriedade fica solta.

Atividade 2

Prever antes de recarregar mostra se você entendeu a regra ou só imitou o código.

Atividade 3

Layout de estudo precisa sobreviver a zoom e tela estreita; anotar falhas evita avançar no escuro.