La barra lateral dice

En esta demostración, se aprovecha la función minmax() para los diseños de cuadrícula. En la demostración, se usa esta función para establecer el tamaño mínimo de la barra lateral en 100px, pero en pantallas más grandes, lo que permite extenderlo a 25%. La barra lateral siempre ocupará el 25% del espacio horizontal del elemento superior hasta que el elemento 25% sea más pequeño que 100px.

Para agregar esto, usa la propiedad grid-template-columns con el siguiente valor: minmax(100px, 25%) 1fr. El elemento de la primera columna (en este caso, la barra lateral) obtiene un minmax de 100px en 25%, y el segundo elemento (aquí la sección main) ocupa el resto del espacio como una sola pista 1fr.

.parent {
  display: grid;
  grid-template-columns: minmax(100px, 25%) 1fr;
}

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

        .parent {
  display: grid;
  grid-template-columns: minmax(100px, 25%) 1fr;
}