Obiettivo
Usare CSS Grid per creare un blocco ordinato senza dover scrivere molte media query.
Questo esercizio è pensato per essere svolto in modo incrementale: prima struttura HTML, poi regole generali, infine dettagli responsive e rifiniture.
Requisiti della traccia
- Titolo della sezione e breve descrizione.
- Sei card con icona testuale, titolo e testo.
- Tre colonne su desktop, due su tablet, una su smartphone.
- Spazi coerenti tra le card.
Procedura consigliata
- Parti da una lista o da una serie di `article`, non da una tabella.
- Usa `grid-template-columns: repeat(auto-fit, minmax(...))`.
- Mantieni gli stessi padding e border radius su tutte le schede.
- Verifica che i titoli lunghi non rompano il layout.
Commento: lavora sempre su una copia del file. In CSS è più facile capire un errore se modifichi una proprietà alla volta e controlli subito il risultato nel browser.
Base HTML commentata
Puoi partire da questa struttura e completarla con contenuti reali.
<section class="servizi">
<h2>I nostri servizi</h2>
<div class="servizi-grid">
<article><span>★</span><h3>Consulenza</h3><p>Testo breve.</p></article>
<article><span>★</span><h3>Formazione</h3><p>Testo breve.</p></article>
</div>
</section>
CSS di partenza commentato
Le regole seguenti non sono una soluzione unica: servono come base ragionata da adattare al tuo progetto.
.servizi-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 18px;
}
.servizi-grid article {
padding: 22px;
border: 1px solid #dbe4f0;
border-radius: 18px;
background: #fff;
}
Controllo finale
- La pagina resta leggibile su smartphone?
- I nomi delle classi descrivono davvero il contenuto?
- Il componente può essere riutilizzato in un’altra pagina?
- Hover e focus sono visibili ma non invadenti?
Continua con gli esercizi
Procedi con la traccia successiva oppure torna all’indice degli esercizi.