La barra laterale dice

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;
}