A barra lateral diz

Esta demonstração usa a função minmax() para layouts de grade. Na demonstração, essa função é usada para definir o tamanho mínimo da barra lateral como 100px, mas em telas maiores, permitindo que ela se estenda para 25%. A barra lateral sempre ocupará 25% do espaço horizontal do pai até que esse 25% seja menor que 100px.

Adicione isso usando a propriedade grid-template-columns com o seguinte valor: minmax(100px, 25%) 1fr. O item na primeira coluna (a barra lateral, neste caso) recebe um minmax de 100px em 25%, e o segundo item (a seção main aqui) ocupa o restante do espaço como uma única faixa 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;
}