如何设置CSS网格布局中列的最大宽度?
问题描述:
我想要什么来实现的:如何设置CSS网格布局中列的最大宽度?
使用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
设定(= 0
当div
为空)来20%
。但是它保持在20%。为什么这样?
答
你误解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>
+0
啊。我读*将大于或等于min且小于或等于max *的大小范围定义为从最小到最大的连续体。你的解释更精确。谢谢。在这种情况下,'max-width'确实是要走的路(我希望避免在列上进行相同的维度设置操作的两个条目) – WoJ
答
您可能需要在容器上设置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>
*我想有一个网页右栏*还有很多其他的方式来实现这一点,是否有使用'网格模板columns'任何具体原因? –
@AbhishekPandey:是的,整个应用程序基于CSS网格(我将阐明在这个问题中) – WoJ
[如何在第二列不存在时制作列满跨宽?](https://*.com/q/43301949/3597276) –