如何限制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 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>

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

无法使用最大宽度限制CSS网格列中的内容宽度

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

CSS网格的minmax(...)函数也无济于事，因为它不考虑相对列宽度 - 至少在我尝试过的情况下。

有没有办法使用CSS网格进行操作？

Answer 1

感觉有点像一个黑客，但是您可以以：

来实现这一目标

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

---

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

'MinMax（Min，Max）'
定义大于或等于最小值的尺寸范围，小于或小于或 等于最大。如果Max＆lt;最小，然后忽略最大，而minmax（min，max）为 被视为最小。最大值，值设置了轨道的弹性 因素;它的最低限度无效。

这意味着，浏览器将首先尝试应用30％-70％的值。如果100% - 200px的计算更大，则该宽度的70％，它可以停止生长，这使第一列可以完全占用200px的空间。