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

Posted 2023-03-07

【中文标题】如何在 CSS 网格布局中设置列的最大宽度？

【英文标题】：How to set the maximum width of a column in CSS Grid Layout?

【发布时间】：2018-01-09 13:54:38

【问题描述】：

我想要达到的目标：

使用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 且小于的大小范围 或等于最大值。

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

【问题讨论】：

我想要一个有右栏的页面还有很多其他的方法可以实现，使用grid-template-columns有什么具体原因吗？

@AbhishekPandey：是的，整个应用程序基于 CSS Grid（我将在问题中澄清这一点）

【参考方案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>

【参考方案2】：

您误解了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>

---

更新：更灵活的解决方案是使用来自this answer 的fit-content 函数。

【讨论】：

啊。我读到将大于或等于 min 且小于或等于 max 的大小范围定义为从 min 到 max 的连续统一体。你的解释更准确。谢谢你。在那种情况下，max-width 确实是要走的路（我希望避免在列上为相同的维度设置操作输入两个条目）

【参考方案3】：

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

见这篇文章：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>

【讨论】：

这将导致该列缩小以适应其中的内容

发布此答案时，fit-content() 的浏览器支持更加有限。今天，它仍然需要在 Firefox 中使用前缀。 caniuse.com/#search=fit-content