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

Question

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

使用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 网格实现上述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>

以下现有问题的标题似乎很有希望,但最终解决了其他问题:

无法使用max-width限制css网格列中的内容宽度

如何在CSS网格布局中设置列的最大宽度？

minmax(...)CSS网格的功能也没有帮助,因为它没有考虑相对列宽 - 至少就我所尝试的而言.

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

Answer 1

感觉有点像黑客，但你可以通过以下方式实现这一点：

\n\n

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

\n\n\n\n

说明（https://drafts.c​​sswg.org/css-grid/#valdef-grid-template-columns-minmax）

\n\n

\n

\xe2\x80\x98minmax(min, max)\xe2\x80\x99
\n 定义大于或等于 min 且小于或等于 max 的大小范围。如果 max < min，则忽略 max，并将 minmax(min,max) 视为 min。作为最大值，一个值设置 track\xe2\x80\x99s flex\n 系数；它至少是无效的。

\n

\n\n

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

\n