CSS Grid Layout 如何设置列的最大宽度？

Question

我想达到的目标：

使用 CSS Grid Layout，使页面右栏的大小根据其内容而定，但最多只能达到 window 宽度的 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()

(...) defines a size range greater than or equal to min and less than or equal to max.

这意味着在我的例子中，宽度设置为从 auto（当 div 为空时 = 0）到 20%。然而，它保持在20%。为什么会这样？

Answer 1

您可能需要在容器本身上设置 max-width 并将其列设置为 auto。

div,
aside {
  border-style: solid;
}

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

aside {
  max-width: 60px; /* 60px is 20% of 300px*/
  /* max-width:20%; 20% of window's */
  font-size: 0;
  transition: 0.25s;
}

#container:hover aside {
  font-size: 1em;
}

<div id="container">
  <div>
    Hover it to see aside grow till 20% average width
  </div>
  <aside>lets give a try to resize it from content</aside>
</div>

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 函数。

Answer 3

"The fit-content function accepts one param, the maximum value. A grid column/row with this property set will still take up as little space as necessary, according to its content, but no more than the maximum value."

查看这篇文章：Becoming a 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>

CSS Grid Layout 如何设置列的最大宽度？

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

html

css

units-of-measurement

css-grid