边栏显示

该演示针对网格布局利用了 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;
}