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

Question

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

80

我想要实现的目标：

使用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()定义了一个大于等于最小值并小于等于最大值的尺寸范围。

(...)

它应该意味着在我的情况下，宽度从auto （当
为空时为0）设置为20％。但实际上它保持在20％。为什么会这样呢？

- WoJ

我想要一个带右侧列的页面。有许多其他方法可以实现这一点，使用 grid-template-columns 有特定原因吗？ - Abhishek Pandey

2

@AbhishekPandey：是的，整个应用程序都基于CSS Grid（我会在问题中澄清）。 - WoJ

4个回答

27

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

因此，为了修复你的布局，你只需要计算你容器宽度的20％，使用max-width属性将其应用于网格项，并在第二列的grid-template-columns属性定义中使用auto。演示：

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

1

啊，我之前读到“定义一个大小范围大于等于min且小于等于max”，理解成了从min到max的连续区间。你的解释更加精确。谢谢你。那么在这种情况下，“max-width”确实是最好的选择（我本来希望避免在列上设置相同尺寸的两个条目）。 - WoJ

15

你可能需要在容器上设置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>

- G-Cyrillus

8

使用 clamp()

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

clamp 函数接受三个参数 (最小值，首选值，最大值)

- Chukwuemeka Maduekwe

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- WDyar · Accepted Answer

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

"请参阅此文章：成为CSS Grid忍者！"

"您可以在仍然使用基于百分比的最大值的情况下解决您的问题："

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>