Html 如何在 CSS Grid Layout 中设置列​​的最大宽度？

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

提问by WoJ

What I want to achieve:

我想要达到的目标：

Using CSS Grid Layout, to have a page with a right column which size is derived from its content, but only up to 20% of the window width.

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

How I thought it would work:

我认为它会如何工作：

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>

It looks good, but then when I remove the content of the second div, the left column does not collapse:

看起来不错，但是当我删除 second 的内容时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>

My question:

我的问题：

I was under the impression that since minmax()

我的印象是，自从 minmax()

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

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

it would mean that in my case the width is set from auto(= 0when the divis empty) to 20%. It however stays at 20%. Why is it so?

这意味着在我的情况下，宽度设置为auto(=0当div为空时) 到20%. 然而，它保持在 20%。为什么会这样？

采纳答案by WDyar

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

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

See this article: Becoming a CSS Grid Ninja!

请参阅本文：成为 CSS 网格忍者！

You can solve your case while still making use of percentage-based maximums:

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

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>

回答by Vadim Ovchinnikov

You've misunderstood minmaxfunction. It first tries to apply maximum value and when that's not possible, it applies minimum.

你误解了minmax函数。它首先尝试应用最大值，如果不可能，则应用最小值。

So to fix your layout, you just need to calculate 20%of your container width, apply it using max-widthproperty for you grid item, and use autoin your grid-template-columnsproperty definition for the second column. Demo:

因此，要修复布局，您只需要计算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>

---

---

Update: More flexible solution will be to use fit-contentfunction from this answer.

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

回答by G-Cyrillus

You might need to set the max-widthon the container itself and let its column set to auto.

您可能需要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>