Monte uma coleção de cartões com Grid

Neste capítulo você vai organizar três cartões numa grade e compreender uma coluna antes de acrescentar outra.

Seu ponto de partida

Continue depois do capítulo 07. Abra pacote de exemplos/08-grid-cartoes. Copie inicio para uma pasta de prática. Abra index.html da cópia no navegador e no editor.

A raiz do exemplo é a referência pronta. Inicio fornece o HTML desta etapa e o CSS no estado anterior. Você modifica sua cópia e compara com a referência. Até o capítulo 11, dois cliques bastam; abrir no disco não publica a página.

Como praticar

Leia e confira as linhas indicadas. Mude uma coisa. Anote sua previsão, salve e recarregue. Compare com a explicação. Se não funcionar, investigue o erro antes de seguir. Pare e retome quando precisar; não é necessário decorar as propriedades.

Comece por uma coluna

A seção Trilhas de estudo contém três cartões. Cada article tem um h3, um parágrafo e um link. Os títulos h3 pertencem à seção iniciada por h2. O conteúdo de cada cartão pode ser lido como uma unidade.

Grid organiza itens em linhas e colunas. A classe grade marca o recipiente. Display: grid ativa esse tipo de layout. Grid-template-columns define as colunas; 1fr cria uma coluna que recebe a parte disponível do espaço.

Não começaremos com três colunas. Primeiro observe os cartões numa coluna, com conteúdo completo e espaço confortável. Depois ficará mais fácil identificar o que muda.

Grid será aplicado dentro de main. O layout externo do Simple.css continua intacto, mesmo que ele também use Grid para sua própria estrutura.

Faça no seu exemplo

Acrescente em custom.css. O recipiente .grade e os três articles já acompanham index.html.

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

Mude uma coisa e preveja

Troque somente gap: 1rem por gap: 2rem.

Antes de recarregar, anote o que você acha que vai mudar e o que deve permanecer igual. Só depois avance para a conferência.

Recarregue e confira

Salve, recarregue e confira os três cartões. Restaure 1rem.

Resultado esperado neste teste: O espaço entre os cartões deve aumentar. Eles continuarão numa coluna.

Se não acontecer

Display: grid precisa estar no recipiente. Colocá-lo só no article não distribui os três articles entre si.

Dê às caixas o espaço que o conteúdo precisa

O Simple.css já fornece bordas, padding e margens para article. Quando esses artigos passam a ser itens de uma grade, usaremos gap para controlar a separação entre eles. Margin: 0 retira as margens dos cartões nesse contexto.

O seletor .grade > article atinge somente os articles que são filhos diretos de .grade. Não muda qualquer article de toda a página. O sinal > expressa essa relação.

Min-width: 0 permite que o item encolha dentro da coluna. Overflow-wrap: anywhere oferece pontos de quebra para uma expressão muito longa. Isso ajuda quando um endereço ou nome sem espaços não cabe.

Não fixe a altura dos cartões. Um pode ter mais texto que outro. A caixa precisa acompanhar o conteúdo e o aumento da fonte.

Faça no seu exemplo

Acrescente em custom.css, depois da regra .grade.

.grade > article {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}
.grade h3 {
  margin-top: 0;
  font-size: 1.3rem;
}

Mude uma coisa e preveja

No segundo cartão, acrescente uma frase ao parágrafo.

Antes de recarregar, anote o que você acha que vai mudar e o que deve permanecer igual. Só depois avance para a conferência.

Recarregue e confira

Teste zoom de 200%. O texto deve permanecer dentro da borda. Depois retire a frase acrescentada.

Resultado esperado neste teste: O cartão deve crescer para acomodar o texto, mantendo a separação para o seguinte.

Se não acontecer

Se o texto cortar, procure height fixa. Não diminua a fonte como primeira solução para esconder esse problema.

Experimente duas colunas e observe o limite

Agora faça um teste temporário. Troque a declaração de colunas para repeat(2, minmax(0, 1fr)). Repeat pede duas repetições. Minmax define um mínimo e um máximo; aqui o mínimo pode ser zero e cada coluna recebe uma fração equivalente do espaço.

Com três cartões, os dois primeiros ficam na primeira linha e o terceiro inicia outra. Isso é esperado. Não existe obrigação de que a última linha fique completa.

Estreite a janela. As duas colunas podem ficar apertadas. O fato de Grid conseguir criá-las não significa que o conteúdo esteja confortável. No capítulo seguinte, a segunda coluna será ativada somente quando houver espaço.

Ao concluir este volume, volte a 1fr. A referência final desta etapa usa uma coluna. O experimento serve para descobrir a necessidade que vamos resolver depois.

Faça no seu exemplo

Substitua somente grid-template-columns: 1fr dentro da regra .grade. A linha não é uma regra independente; fica entre as chaves existentes.

grid-template-columns: repeat(2, minmax(0, 1fr));

Mude uma coisa e preveja

Teste duas colunas e depois recupere grid-template-columns: 1fr.

Antes de recarregar, anote o que você acha que vai mudar e o que deve permanecer igual. Só depois avance para a conferência.

Recarregue e confira

Conte os cartões e observe o terceiro na linha seguinte. Registre se os parágrafos ficaram apertados na janela estreita.

Resultado esperado neste teste: Na janela larga, os cartões devem se distribuir em duas colunas. Ao restaurar 1fr, voltam a uma coluna em todas as larguras.

Se não acontecer

Não cole a declaração solta fora de uma regra. Uma propriedade precisa estar dentro das chaves de um seletor.

A captura mostra um trecho da referência concluída. Role a página do exemplo para conferir o restante. Os testes temporários podem apresentar outra aparência; restaure os valores indicados antes de comparar.

Atividades para fazer antes das respostas

Use uma nova cópia do exemplo. Estas atividades são para aplicar o que aprendeu; tente antes de ler o comentário.

1. Aumente gap mantendo uma coluna.
2. Teste duas colunas com três cartões.
3. Insira uma expressão longa num cartão e confira o zoom.

Respostas comentadas

Compare seu resultado e sua explicação. Um ajuste diferente pode funcionar, desde que cumpra a tarefa sem cortar conteúdo nem retirar acesso.

1. Modifique gap em .grade; não altere a declaração de colunas.

2. Use repeat(2, minmax(0, 1fr)). O terceiro cartão inicia a segunda linha. Volte a 1fr ao concluir.

3. Min-width: 0 e overflow-wrap: anywhere ajudam a evitar transbordamento. Confira o resultado, sem altura fixa nem corte do texto.

Quando seguir

Você consegue alternar uma e duas colunas e identificar quando a segunda deixa a leitura apertada. Se ainda precisa de ajuda para isso, repita o teste pequeno antes de avançar.

Consulta opcional

Os links abaixo aprofundam este assunto. Você não precisa lê-los para realizar a prática com os arquivos locais. Créditos da origem e licenças ficam no README.

• Referência 1

O arquivo completo

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

app.js

const form = document.querySelector("#form-estudo");
const resultado = document.querySelector("#resultado");
const conferir = document.querySelector("#conferir");
if (form && resultado && conferir) {
  form.addEventListener("submit", (event) => {
    event.preventDefault();
    resultado.textContent =
      "Preenchimento válido no navegador. Nenhum dado foi enviado.";
  });
  form.addEventListener("reset", () => {
    resultado.textContent = "";
  });
  conferir.disabled = false;
}