Uma Grade de Projetos Responsiva
CSS Sem Sofrimento: Layouts com Grid
Todo grande portfólio precisa de uma forma limpa de exibir seus trabalhos. O padrão clássico é uma grade de cards de projetos — linhas e colunas organizadas que se reacomodam automaticamente conforme o tamanho da tela muda.
Do jeito antigo, era uma luta contra floats e clearfixes. Do jeito novo? Você descreve o que quer — "três colunas iguais com um espaçamento entre elas" — e as utilities de grid do Tailwind cuidam do resto. Sem precisar de arquivo CSS.
Nesta lição você vai construir uma grade de projetos responsiva: um título e, em seguida, um contêiner grid com três cards. Ao final, você vai entender grid, grid-cols-3 e gap — as três ferramentas que você vai usar de novo e de novo.
Instruções
Adicione um título h2 acima da grade para que os visitantes saibam o que estão vendo.
Dica: Use: `<h2 class="text-3xl font-bold mb-8 text-center">Projetos Selecionados</h2>`
Onde é que isto entra?
<!-- Construa sua grade de projetos aqui -->Escreva na linha 12 — abaixo desse comentário, depois do código que já adicionou.
Crie uma div contêiner de grade usando grid, com um gap entre os cards.
Faça a grade mostrar três colunas iguais em telas médias ou maiores.
Adicione pelo menos um card de projeto dentro da grade usando um elemento article com título e descrição.
Seu Código
Descreva o que você quer construir para esta etapa e eu escrevo o código — depois clique em Aplicar para inseri-lo no seu editor. Esta etapa: Adicione um título h2 acima da grade para que os visitantes saibam o que estão vendo.