Montar cartões com auto-fit e auto-fill

Neste capítulo você vai criar uma grade responsiva de cartoes sem media query. 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 é 13-auto-fit, 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.

Há jogos públicos que treinam Grid com feedback imediato. Use só como reforço curto; o percurso continua na Vitrine.

Objetivo desta etapa

Neste capítulo você vai criar uma grade responsiva de cartoes sem media query. Continue na Vitrine da Aurora. Trabalhe na cópia de inicio e compare com a referência quando precisar.

Faça na sua cópia

Abra assets/styles.css da cópia e localize a regra nova desta etapa. A implementação completa está no pacote de exemplos que acompanha este volume.

grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));

Mude uma coisa e preveja

Troque 14rem por 18rem.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

Cabem menos colunas na mesma largura.

Se não acontecer

Se nada mudar, confirme a cópia, salve e recarregue com cache limpo se preciso.

Uma mudança e uma previsão

Altere só o que a lição pede. Anote o que espera ver. Depois confira. Esse hábito evita chutar várias propriedades de uma vez.

Faça na sua cópia

Repita a mudança da lição anterior ou uma variação mínima. A implementação completa está no pacote de exemplos que acompanha este volume.

grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));

Mude uma coisa e preveja

Desfaça e refaça a mudança uma vez, prevendo o resultado.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

O resultado deve coincidir com a previsão. Se não, leia a regra com calma.

Se não acontecer

Diferença entre file:// e outra pasta? Feche abas antigas.

Erro comum desta etapa

Misturar essa etapa com regras de etapas futuras atrapalha. Use só o CSS desta pasta. Cada exemplo é independente.

Faça na sua cópia

Compare o arquivo da referência com o da sua cópia. A implementação completa está no pacote de exemplos que acompanha este volume.

exemplos/13-auto-fit/

Mude uma coisa e preveja

Restaure a cópia a partir de inicio se tiver se perdido.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

Você recupera um ponto estável e continua.

Se não acontecer

Não copie CSS de outra pasta de exemplo sem ler o objetivo.

Atividades

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

1. Explique com suas palavras o objetivo: criar uma grade responsiva de cartoes sem media query.
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 criar uma grade responsiva de cartoes sem media query.

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.