如果我减小容器的宽度,为什么单元格占用的宽度小于 200 像素?
我认为 minmax 必须保持宽度不小于第一个参数 (200px)。
如果删除.a
、.k
和.g
的样式,一切正常。
https://codepen.io/rachelandrew/pen/GZQYQa
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr) ) ;
background-color: #fff;
}
.box {
background-color: #444;
color: white;
}
.a {
grid-column: auto / span 2;
}
.k {
grid-column: auto / span 3;
}
.g {
grid-column: auto / span 2;
grid-row: auto / span 2;
}
<div class="wrapper">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
<div class="box d">D</div>
<div class="box e">E</div>
<div class="box f">F</div>
<div class="box g">G</div>
<div class="box h">H</div>
<div class="box i">I</div>
<div class="box j">J</div>
<div class="box k">K</div>
<div class="box l">L</div>
<div class="box m">M</div>
</div>
最佳答案
auto-fill
和 auto-fit
创建隐式网格(我不确定。我在规范中没有发现任何相关内容)。
下一行解决了问题
grid-auto-columns: minmax(200px, 1fr);
关于css - 列宽小于 minmax,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50785142/