Боковая панель говорит

В этой демонстрации используется функция minmax() для макетов сетки. В демо-версии эта функция используется для установки минимального размера боковой панели на 100px , но на больших экранах этот размер можно увеличить до 25% . Боковая панель всегда будет занимать 25% горизонтального пространства родительского элемента, пока эти 25% не станут меньше 100px .

Добавьте это, используя свойствоgrid grid-template-columns со следующим значением: minmax(100px, 25%) 1fr . Элемент в первом столбце (в данном случае боковая панель) получает minmax 100px при 25% , а второй элемент (здесь main раздел) занимает остальную часть пространства в виде одной дорожки 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;
}