Questa demo sfrutta la funzione minmax() per i layout a griglia. Nella demo questa funzione viene utilizzata per impostare la dimensione minima della barra laterale su 100px
, ma su schermi più grandi, in modo che si allunghi fino a 25%
. La barra laterale occuperà sempre 25%
dello spazio orizzontale della barra principale finché 25%
non diventa inferiore a 100px
.
Aggiungi questo valore utilizzando la proprietà grid-template-columns
con il seguente valore:
minmax(100px, 25%) 1fr
. L'elemento nella prima colonna (in questo caso la barra laterale) riceve un valore minmax
pari a 100px
in 25%
e il secondo elemento (qui la sezione main
) occupa il resto dello spazio come un'unica traccia 1fr
.
.parent {
display: grid;
grid-template-columns: minmax(100px, 25%) 1fr;
}
HTML
<div class="parent">
<div class="section yellow" contenteditable>
Min: 100px / Max: 25%
</div>
<div class="section blue" contenteditable>
This element takes the second grid position (1fr), meaning
it takes up the rest of the remaining space.
</div>
</div>
CSS
.parent {
display: grid;
grid-template-columns: minmax(100px, 25%) 1fr;
}