Grid网格布局

前言

我们平时使用flex布局比较多，但是flex中justify-content:space-between和around会让子元素两端对齐，最后一行的子元素分配不在我们理想中

1、flex布局问题

        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;

 

当然，让最后一行对齐大家也是能够找到方法实现，但是会比较麻烦，但是使用grid布局的话就会容易一些

下述代码中display:grid为刚需，是将盒子转为grid布局

注：父元素设置grid之后，子元素可不用设置宽度和margin 

将repeat改为（4,1fr）之后会左对齐，不会出现flex布局的问题

grid-row和grid-column可以控制某个元素占领几份

      .box1{
        grid-row: 1/3;
        grid-column: 1/3;
      }

行：grid-row:从第几列开始/（第几列开始+想占几个）
列：grid-column:从第几行开始/（第几行开始+想占几个）
注：使用改方法时，子元素不要给高度和宽度