flex布局自定义一行几栏,靠左对齐===grid布局

模板 

 <div class="content"><div class="item">1222</div><div class="item">1222</div><div class="item">1222</div><div class="item">1222</div><div class="item">1222</div><div class="item">1222</div><div class="item">1222</div><div class="item">1222</div></div>

样式 

.content {width: 70%;margin: auto;display: flex;flex-wrap: wrap;padding: 30px;background-color: skyblue;.item {/* 去掉两边间隙总60px*/flex: 0 0 calc((100% - 60px) / 3);height: 120px;background-color: pink;/* 间隙为30px */margin: 0 30px 30px 0;&:nth-child(3n) {/* 去除第3n个的margin-right */margin-right: 0;}&:nth-last-child(-n + 3) {margin-bottom: 0; // 去除最后一行的底部间距}}
}

使用grid布局

.content {width: 80vw;margin: auto;display: grid;/* 设置一行3列 */grid-template-columns: repeat(3, 1fr);/* 设置间隙为20px */grid-gap: 20px;padding: 30px;background-color: skyblue;.item {/* 设置高度120px */height: 120px;background-color: pink;}
}

补充：给父盒子添加vw或%单位，否则会失去响应式

注意：grid布局子盒子不要给宽度，不然没有自适应了