我们经常会有这样的需求,网页上多个卡片实现网格排列布局,并且要根据浏览器大小不同自适应每行展示个数 还要居中 。
例如下面这种设计(画了个草图~)
最开始想用flexl来做 但是不好做居中。
还是用网格布局
参考了阮一峰的教程:https://ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
.content-box {
display: grid;
grid-template-columns: repeat(auto-fit, 150px);
justify-content: center; //这个一定要加
}
// 这里写对应的间距就可以
.card-item{
margin-top:24px;
margin-left:24px;
}
注意要居中显示的话,grid-template-columns: repeat 属性要用auto-fit,不能用auto-fill。
当空间剩余时,auto-fit会将每个单元格扩大,而auto-fill会用空格子填剩余空间。
当元素为一行且有剩余空间的时候,比较明显。
auto-fill效果如下:
auto-fit的效果:
ok啦,这种grid布局方式可以适应多尺寸浏览器,是在是很好用!