La creazione di una griglia reattiva in CSS diventa molto più semplice con l’uso di CSS Grid e Flexbox. Ecco un esempio di come creare una griglia reattiva utilizzando CSS Grid:
```
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-gap: 20px;
box-sizing: border-box;
}
.container > div {
background-color: #ccc;
padding: 20px;
}
```
In questa griglia, stiamo creando colonne che hanno una larghezza minima di 200px e una massima di 1fr, che significa “1 parte del spazio disponibile”. Repeat(auto-fill, …) permette di generare automaticamente una griglia che si adatta al numero di elementi contenuti.
Quando la dimensione della finestra del browser cambia, il numero di colonne sulla griglia si riadatterà per mantenere almeno 200px di larghezza per ciascuna colonna, creando così una griglia reattiva.
Un esempio alternativo potrebbe essere utilizzare la proprietà flexbox di CSS:
```
.container {
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
}
.container > div {
flex-basis: calc(33.33% – 20px);
background-color: #ccc;
padding: 20px;
margin: 10px;
box-sizing: border-box;
}
```
In questo esempio, stiamo utilizzando flexbox per creare una griglia che avrà tre colonne per riga. Flex-basis definisce la larghezza di base di ciascun elemento, creando quindi tre colonne per riga. Quando lo schermo viene ridimensionato, il contenuto si adatterà per riempire lo spazio disponibile.
