Question

我想创建一个网页布局，其中灵活列可能会限制在某些最大宽度。例如，侧边栏菜单占可用水平空间的30％，但不应超过200px。

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

这显然是一个最小的例子 - 真正的布局会复杂得多，我想利用CSS网格功能，如列/行跨越和自动列，以及媒体查询的响应性。到目前为止，我没有设法通过CSS 网格实现上述flexbox示例的相同效果：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

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

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

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＆lt; min，则忽略max，minmax（min，max）为作为分钟对待。作为最大值，值设置轨道的弹性因子;它至少是无效的。

这意味着，浏览器将首先尝试应用30％ - 70％的值。如果100% - 200px的计算量大于整个宽度的70％则会停止增长，这会让第一列精确占据200px的空间。

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

1 个答案: