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()

(...) 定义大于或等于最小值且小于或等于最大值的大小范围。

这意味着在我的情况下，宽度从auto （当div为空时 = 0 ）设置为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属性应用它，并在第二列的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功能。

Answer 3

您可能需要在容器本身上设置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 4

使用 clamp()

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

其中 clamp 采用三个参数（最小值、首选值、最大值）