Funzione minmax nei grid CSS
È molto comodo specificare insieme a auto-fill
la funzione minmax,
che definisce un intervallo di larghezza per le colonne
da un valore minimo a uno massimo.
Se la larghezza del contenitore non può contenere tutte
le colonne, alcune di esse si sposteranno
su una nuova riga, mentre le colonne sulla riga
si distribuiranno uniformemente al suo interno.
Diamo un'occhiata a un esempio. Per vedere diverse varianti di disposizione delle colonne, modifica la larghezza della pagina:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Scrivi un esempio che dimostri
il funzionamento della funzione minmax.
