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

Question

我想要达到的目标：

使用 CSS Grid Layout ，让页面有一个右列，其大小来自其内容，但最多只有窗口宽度的 20%。

我认为它会如何工作：

 div {
  border-style: solid;
}

#container {
  width: 300px;
  height: 300px;
  display: grid;
  grid-template-columns: 1fr minmax(auto, 20%);
}

 <div id="container">
  <div>
    some content
  </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus eu leo ac ultrices. Vivamus ornare, orci sed pretium sollicitudin
  </div>
</div>

看起来不错，但是当我删除第二个 div 的内容时，左列不会折叠：

 div {
  border-style: solid;
}

#container {
  width: 300px;
  height: 300px;
  display: grid;
  grid-template-columns: 1fr minmax(auto, 20%);
}

 <div id="container">
  <div>
    some content
  </div>
  <div></div>
</div>

我的问题：

我的印象是，自从 minmax()

(…) 定义大于或等于 min 且小于或等于 max 的大小范围。

it would mean that in my case the width is set from auto (= 0 when the div is empty) to 20% .然而，它保持在 20%。为什么会这样？

原文由 WoJ 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

“fit-content 函数接受一个参数，即最大值。具有此属性集的网格列/行仍将根据其内容占用尽可能少的空间，但不会超过最大值。”

请参阅这篇文章： 成为 CSS Grid Ninja！

您可以解决您的问题，同时仍然使用基于百分比的最大值：

 div {
  outline: 1px dotted gray;
}

.container {
  width: 300px;
  height: 300px;
  display: grid;
  grid-template-columns: 1fr fit-content(20%);
}

.container div {
  overflow: hidden; /* this needs to be set so that width respects fit-content */
}

 <div class="container">
  <div>
    some content
  </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus eu leo ac ultrices. Vivamus ornare, orci sed pretium sollicitudin
  </div>
</div>

<div class="container">
  <div>
    some content
  </div>
  <div></div>
</div>

原文由 WDyar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

你误解了 minmax 功能。它首先尝试应用最大值，当不可能时，它应用最小值。

因此，要修复您的布局，您只需要计算 20% 容器宽度，使用 max-width 属性为您的网格项目应用它，并使用 auto grid-template-columns 第二列的属性定义。演示：

 div {
  outline: 1px dotted gray;
}

.container {
  width: 300px;
  height: 300px;
  display: grid;
  grid-template-columns: 1fr auto;
}

.container > :nth-child(2) {
  max-width: 60px; /* 20% x 300px */
}

 <div class="container">
  <div>
    some content
  </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus eu leo ac ultrices. Vivamus ornare, orci sed pretium sollicitudin
  </div>
</div>

<div class="container">
  <div>
    some content
  </div>
  <div></div>
</div>

---

更新：更灵活的解决方案是使用 fit-content 这个答案 中的函数。

原文由 Vadim Ovchinnikov 发布，翻译遵循 CC BY-SA 4.0 许可协议