100个Div水平垂直均匀分布CSS

需求

容器宽度不固定，div宽度高度固定，间距固定并贴合容器的边。
重要一点，要跟设计稿的像素一样，不然计算好间距。

实现

简单3行代码

.container{
	display: grid;  //网格布局
	gap: 18px;  //元素之间间距18px
	grid-template-columns: repeat(auto-fill, 60px);  //水平自动填充满元素，每个宽度为60px
	.son{
		width:60px;
		height:60px;
	}
}

优点

不用考虑最后一个不要右边距和最后一行不要下边距。

缺点

注意兼容性

效果