需求
容器宽度不固定,div宽度高度固定,间距固定并贴合容器的边。
重要一点,要跟设计稿的像素一样,不然计算好间距。
实现
简单3行代码
.container{
display: grid; //网格布局
gap: 18px; //元素之间间距18px
grid-template-columns: repeat(auto-fill, 60px); //水平自动填充满元素,每个宽度为60px
.son{
width:60px;
height:60px;
}
}
优点
不用考虑最后一个不要右边距和最后一行不要下边距。
缺点
注意兼容性
效果