Quando usare questo esempio
Griglia fluida utile per servizi, vantaggi, funzionalità o moduli di un corso.
Copialo in una pagina di prova, cambia testi e colori, poi integralo nel tuo progetto solo dopo aver capito il ruolo di ogni classe.
HTML
La struttura HTML resta semantica: usa elementi riconoscibili e attributi utili per l’accessibilità.
<div class="demo-service-grid">
<article><h3>Layout</h3><p>Costruisci sezioni ordinate.</p></article>
<article><h3>Responsive</h3><p>Adatta tutto agli schermi piccoli.</p></article>
<article><h3>Componenti</h3><p>Riusa card, bottoni e box.</p></article>
</div>
CSS commentato
Il CSS punta alla semplicità: poche classi, proprietà leggibili e comportamento responsive prevedibile.
.demo-service-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 18px;
}
.demo-service-grid article { padding: 20px; border: 1px solid #dbe4f0; border-radius: 18px; background: #fff; }
Commenti didattici
- `auto-fit` usa solo le colonne che entrano nello spazio disponibile.
- `minmax(210px, 1fr)` definisce una larghezza minima sicura.
- Il layout diventa responsive anche senza molte media query.
Prova pratica: cambia un solo valore alla volta, per esempio `gap`, `padding` o `border-radius`, e osserva come cambia il componente.
Continua con gli esempi
Apri l’esempio successivo oppure torna alla raccolta completa.