如何限制百分比 CSS3 网格列的宽度？

Question

我想创建一个带有灵活列的网页布局，可以限制为某些最大宽度。 例如，侧边栏菜单占用 30% 的可用水平空间，但宽度不应超过 200 像素。

使用 CSS flexbox，我会采用这样的解决方案：

.flexbox-layout {
  display: flex;
}
.flexbox-sidebar {
  flex: 1 1 30%;
  max-width: 200px;
  background-color: lightblue;
}
.flexbox-content {
  flex: 1 1 70%;
  background-color: lightgreen;
}

<p>Layout based on CSS flexbox:</p>
<div class="flexbox-layout">
  <div class="flexbox-sidebar">
    <ol>
      <li>Menu item 1</li>
      <li>Menu item 2</li>
      <li>Menu item 3</li>
    </ol>
  </div>
  <div class="flexbox-content">
    <p>Content</p>
  </div>
</div>

这显然是一个最小的例子——真正的布局会复杂得多，我想利用 CSS 网格功能，如列/行跨越和自动列，结合媒体查询以提高响应能力。 到现在为止，我还没有设法用 CSS grid 实现与上述 flexbox 示例相同的效果：

.grid-layout {
  display: grid;
  grid-template-columns: 30% 70%; /* Max. width for 1st column? */
  grid-template-rows: auto;
}
.grid-sidebar {
  background-color: lightblue;
}
.grid-content {
  background-color: lightgreen;
}

<p>Layout based on CSS grid:</p>
<div class="grid-layout">
  <div class="grid-sidebar">
    <ol>
      <li>Menu item 1</li>
      <li>Menu item 2</li>
      <li>Menu item 3</li>
    </ol>
  </div>
  <div class="grid-content">
    <p>Content</p>
  </div>
</div>

以下现有问题的标题看起来很有希望，但最终解决了其他问题：

Can't use max-width to limit content width in css grid column

How to set the maximum width of a column in CSS Grid Layout?

CSS 网格的 minmax(...) 函数也无济于事，因为它没有考虑相对列宽 - 至少就我而言。

有没有办法用 CSS 网格做到这一点？

Answer 1

感觉有点像 hack，但您可以通过以下方式实现：

grid-template-columns: auto minmax(calc(100% - 200px), 70%);

---

解释 (https://drafts.csswg.org/css-grid/#valdef-grid-template-columns-minmax)

‘minmax(min, max)’
定义大于或等于 min 且小于 or 的大小范围 等于最大值。如果 max

这意味着，浏览器将首先尝试应用 30% - 70% 的值。如果100% - 200px 的计算值大于整个宽度的 70%，它就会停止增长，这使得第一列正好占据 200px 的空间。