该演示针对网格布局利用了 minmax() 函数。在演示中,此函数用于将最小边栏尺寸设置为 100px
,但在较大的屏幕上,这会使边栏可以拉伸至 25%
。边栏将始终占据其父级的 25%
的水平空间,直到 25%
小于 100px
。
使用具有以下值的 grid-template-columns
属性添加此代码:minmax(100px, 25%) 1fr
。第一列(在本例中为边栏)中的项在 25%
处获得 100px
的 minmax
,第二项(此处为 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;
}