本示範利用格線版面配置的 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;
}
<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;
}