Griglia responsive di contenuti
Griglia automatica che cambia numero di colonne.
Quando si usa
Quando devi mostrare molte card, servizi, fotografie o prodotti senza scrivere numerose media query.
Perché si usa
CSS Grid con auto-fit e minmax distribuisce automaticamente gli elementi nello spazio disponibile.
Vantaggi principali
- Numero di colonne automatico
- Codice breve
- Buona resa su schermi diversi
Anteprima del risultato
La griglia dispone più elementi sulla stessa riga e si adatta automaticamente allo spazio disponibile.
Card 1
Card 2
Card 3
Card 4
Codice completo
Puoi copiare il frammento e inserirlo in una pagina di prova. Prima della pubblicazione sostituisci i dati dimostrativi con quelli reali.
<section class="griglia">
<article>Contenuto 1</article>
<article>Contenuto 2</article>
<article>Contenuto 3</article>
<article>Contenuto 4</article>
</section>
<style>
.griglia{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.griglia article{padding:20px;border:1px solid #d8e1ec;border-radius:12px;background:#fff}
</style>Da personalizzare: Cambia la larghezza minima di 240px, lo spazio gap e lo stile degli elementi interni.
Errore da evitare: Una larghezza minima troppo elevata può creare scorrimento orizzontale sugli smartphone.