側欄說：「

本示範利用格線版面配置的 minmax() 函式。在示範中，此函式用於將側欄的最小尺寸設為 100px，但在較大的螢幕上，以將其延展至 25%。側欄一律會佔用其父項水平空間的 25%，直到 25% 小於 100px 為止。

方法是使用具有下列值的 grid-template-columns 屬性：minmax(100px, 25%) 1fr。第一欄 (在本範例中為側欄) 的項目在 25% 取得 minmax 為 100px，第二個項目 (這裡的 main 區段) 則佔用空間的其餘部分做為單一 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;
}