你可以在这里检查代码。我希望第一个单元格占据 2 列，其余单元格占据 1 列。有没有办法在对 CSS 网格中的列使用自动调整时做到这一点？
<h2>Auto-fit</h2>
<div class="wrapper fit">
<div class="col-2">1</div>
<div class="">2</div>
<div class="">3</div>
<div class="">4</div>
<div class="">5</div>
<div class="">6</div>
</div>
CSS
.wrapper {
display: grid;
}
.fit {
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
好的让它工作。
对于要增加列数的单元格，您必须为其指定grid-column。
所以在上面第一个单元格的例子中指定
.col-2 {
grid-column: 1 /3;
}
要使网格每行仅换行 1 列，请添加媒体查询。
.col-2{
grid-column: 1/3;
@media only screen and (max-width: 33em) {
grid-column: 1/2;
}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句