我知道新的minmax() https://developer.mozilla.org/en-US/docs/Web/CSS/minmax允许指定网格列的最小和最大宽度的函数。然而，当使用此函数时，我不清楚列的“默认”宽度是什么，以及如何指定它。
在网格之外 - 包括在弹性布局中 - 可以指定如下内容：
.container {
width: 25%;
min-width: 200px;
max-width: 400px;
}
有效地创建一个容器，默认情况下占据其父级宽度的 25%，但永远不会缩小到 200 像素以下或增长超过 400 像素。
实现这种效果的网格等效方法是什么？
基于您的一般 CSS 代码示例...
.container {
width: 25%;
min-width: 200px;
max-width: 400px;
}
这是一种可以在 CSS 网格中使用的方法：
- 将第一列的宽度设置为最小 200 像素，最大 400 像素。
- 将第二列的宽度设置为最小值 75% 和最大值
1fr.
第二列的 75% 强制第一列为 25%。
The 1fr使第二列占用额外空间。
#container {
display: grid;
grid-template-columns: minmax(200px, 400px) minmax(75%, 1fr);
grid-gap: 10px;
height: 100px;
border: 1px solid gray;
}
#container > div {
background-color: lightgreen;
padding: 5px;
}
<div id="container">
<div>
grid item<br> minimum width = 200px<br> maximum width = 400px
</div>
<div>
grid item<br> minimum width = 75%<br> maximum width = 1fr
</div>
</div>
jsFiddle 演示 https://jsfiddle.net/9mdpnemk/2/
Notes:
- 可以添加更多列。它们只需要总宽度达到 75% 即可。
- 您可能需要处理溢出情况，具体取决于您的具体情况。
- 您的问题中关于布局的细节不多，所以我无法更准确。
除了上面的解决方案之外，我不相信 CSS 网格可以实现这种效果。
据我所知，没有办法说：
列宽必须为容器的 25%，且不得小于 200 像素或大于 400 像素。
您可以设置minmax()或固定长度。
换句话说，你可以这样做：
#container {
display: grid;
grid-template-columns: minmax(200px, 400px);
}
... 或这个：
#container {
display: grid;
grid-template-columns: 25%;
}
#container {
display: grid;
grid-template-columns: minmax(200px, 400px) 1fr;
grid-gap: 10px;
padding: 10px;
height: 100px;
background-color: #8cffa0;
}
#container > div {
background-color: #8ca0ff;
padding: 5px;
}
<div id="container">
<div>
grid item<br> minimum width = 200px<br> maximum width = 400px
</div>
<div>
grid item<br> takes remaining space on the row
</div>
</div>
jsFiddle 演示 https://jsfiddle.net/9mdpnemk/
根据您的具体情况，将容器设置为 25%，并将网格项设置为最小-最大，可能适合您。像这样的事情：
#container {
display: grid;
grid-template-columns: 25%;
}
#container > div {
min-width: 200px;
max-width: 400px;
}
请记住第一个规则的大小column第二条规则的大小网格项。因此，有时（尤其是在更宽的屏幕上）25% 的列可能比 400px 网格项更宽。这会导致间隙。
#container {
display: grid;
grid-template-columns: 25% 1fr;
grid-gap: 10px;
padding: 10px;
height: 100px;
background-color: #8cffa0;
}
#container > div:first-child {
min-width: 200px;
max-width: 400px;
}
#container > div {
background-color: #8ca0ff;
padding: 5px;
}
<div id="container">
<div>
grid item
<br> minimum width = 200px
<br> maximum width = 400px
</div>
<div>
grid item
<br> takes remaining space on the row
</div>
</div>
jsFiddle 演示 https://jsfiddle.net/9mdpnemk/1
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
