display一行三个或者四个均匀布局,宽度自适应,多余换行(随意缩放)
代码如下
<div class="container" >
<div class="item-color">1</div>
<div class="item-color">2</div>
<div class="item-color">3</div>
<div class="item-color">4</div>
<div class="item-color">5</div>
<div class="item-color">6</div>
</div>
样式
.container {
width: 100%;
padding-top: 8px;
padding-bottom: 20px;
display: grid;
/* 根据容器宽度自动填充列 */
grid-template-columns: repeat(auto-fit, minmax(394px, 1fr));
grid-gap: 17px; /* 设置网格间隙 */
justify-items: stretch;/* 拉伸网格项以填充整个单元格 */
}
.item-color{
background-color:#32C797;
}
效果图