css grid网格布局 自适应居中 超好用！

我们经常会有这样的需求，网页上多个卡片实现网格排列布局，并且要根据浏览器大小不同自适应每行展示个数 还要居中 。
例如下面这种设计（画了个草图～）

最开始想用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布局方式可以适应多尺寸浏览器，是在是很好用！