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

Question

我想要实现的目标:

使用CSS网格布局,使页面具有正确的列,其大小是从其内容派生的,但最多只能占窗口宽度的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的大小范围.

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

Answer 1

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

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

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

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>

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>

Answer 3

使用clamp()

grid-template-columns: clamp(350px, 40%, 500px) auto;

其中，clamp 采用三个参数（min、preferred、max）

Answer 4

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