Una griglia di progetti responsive
CSS senza fatica: layout con Grid
Ogni grande portfolio ha bisogno di un modo pulito per mettere in mostra i tuoi lavori. Il pattern classico è una griglia di card di progetto — righe e colonne ordinate che si riorganizzano automaticamente al variare delle dimensioni dello schermo.
Alla vecchia maniera significava lottare con float e clearfix. Alla nuova? Descrivi ciò che vuoi — "tre colonne uguali con uno spazio tra loro" — e le utility grid di Tailwind fanno il resto. Nessun file CSS richiesto.
In questa lezione costruirai una griglia di progetti responsive: un titolo, poi un contenitore grid con tre card. Alla fine avrai capito grid, grid-cols-3 e gap — i tre strumenti che userai ancora e ancora.
Istruzioni
Aggiungi un titolo di sezione h2 sopra la griglia, così i visitatori sanno cosa stanno guardando.
Suggerimento: Usa: `<h2 class="text-3xl font-bold mb-8 text-center">Progetti selezionati</h2>`
Dove va scritto?
<!-- Costruisci qui la tua griglia di progetti -->Scrivilo alla riga 12: sotto quel commento, dopo il codice che hai già aggiunto.
Crea un div contenitore griglia usando grid con un gap tra le card.
Fai in modo che la griglia mostri tre colonne uguali su schermi medi e più grandi.
Aggiungi almeno una card di progetto dentro la griglia usando un elemento article con titolo e descrizione.
Il tuo codice
Descrivi ciò che vuoi creare per questo passaggio e scriverò il codice — poi clicca su Applica per inserirlo nel tuo editor. Questo passaggio: Aggiungi un titolo di sezione h2 sopra la griglia, così i visitatori sanno cosa stanno guardando.