Kenar çubuğu şunu diyor:

Bu demo, ızgara düzenleri için minmax() işlevinden yararlanmaktadır. Demoda bu işlev, minimum kenar çubuğu boyutunu 100px olarak ayarlamak için kullanılırken daha büyük ekranlarda ise bu boyutun 25%'a kadar genişletilmesini sağlıyor. Kenar çubuğu, 25% öğesi 100px değerinden küçük olana kadar her zaman üst öğesinin yatay alanının 25% kadarını kaplar.

Bu değeri, grid-template-columns özelliğini aşağıdaki değerle ekleyerek ekleyin: minmax(100px, 25%) 1fr. İlk sütundaki (bu durumda kenar çubuğu) öğe, 25% için 100px minmax alır ve ikinci öğe (buradaki main bölümü) alanın geri kalanını tek bir 1fr parça olarak kaplar.

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