我遇到了与 CSS 网格布局相关的 minmax()
函数的一些问题。
这是我的代码:
* {
box-sizing: border-box;
}
.grid {
display: grid;
grid-template-columns: minmax(150px, 250px) 1fr 1fr;
grid-gap: 20px;
}
.grid div {
border: 1px solid rgb(0, 95, 107);
border-radius: 3px;
background: rgba(0, 95, 107, 0.8);
padding: 0.2em;
color: #FFF;
}
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
当我将 minmax()
与我的 CSS 中提到的 fr
单元一起使用时,网格轨道的宽度会获得最大值,并且保持在最大尺寸,即使我缩小视口(viewport);但是当我将它与 px
一起使用时,如下所示
grid-template-columns: minmax(150px, 250px) 200px 200px;
它按预期工作,我不知道为什么。
测试:Chrome 和 Firefox
最佳答案
您的代码没有任何问题。这似乎是 minmax
与使用 fr
单位的列组合时的标准行为,因为 fr
单位没有最小值(除了其内容的宽度在这里几乎是空的——只有一个数字)。
如果有足够的屏幕空间,minmax
将占据其最大值。
如果您要增加 minmax
中的最大值,然后调整您的浏览器窗口,您会注意到 minmax
正在工作,并且当没有足够的空间时为了使其达到最大宽度,其宽度将减小。
关于html - CSS 网格布局中的 minmax(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41204097/