側欄說:「

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

方法是使用具有下列值的 grid-template-columns 屬性:minmax(100px, 25%) 1fr。第一欄 (在本範例中為側欄) 的項目在 25% 取得 minmax100px,第二個項目 (這裡的 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;
}