css水平均匀布局两个方法

更多方法参考：http://t.zoukankan.com/gaoht-p-14518823.html

//方法一：
.wrap{
  width: 100%;
}
.item{
  margin-right: 20px;
  margin-bottom: 20px;
  width: calc((100% - 20px * 3) / 4);
  width: -webkit-calc((100% - 20px * 3)/ 4);
  float: left;
  box-sizing: border-box;
}
.item:nth-child(4n){
  margin-right: 0px;
}

 

//方法二： 优点：容器宽度不固定，div宽度高度固定，间距固定并贴合容器的边，不浮动； 缺点：兼容性
//一行三个，间距为20
.container{
    display: grid;  //网格布局
    gap: 20px;  //元素之间间距20px
    grid-template-columns: repeat(auto-fill,  calc((100% - 20px * 2) / 3));  
    .son{
        height:120px;
    }
}

参考文章： https://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html  阮一峰详解grid