场景：适用于固定模块展示，不适用于宽度缩小需要掉下一行的需求，不支持部分属性不支持IE11

行和列才能组成网格，所以在网格布局中行和列是重要参数

父盒子需设置display:grid;

div:{ 
      设置网格布局
     display:grid;
      行间距，列间距
     grid-row-gap: 20px;
     grid-column-gap: 20px;

      grid-template-columns: 25% 25% 25% 25%; // 四列，每列宽度25%
      grid-template-rows: 33.33% 33.33% 33.33%;//三行，每行高度25%
       行数，列数较多可以简写
      grid-template-columns: repeat(4, 25%);
      grid-template-rows: repeat(3, 33.33%);
      grid-template-columns: repeat(2, 100px 50px 80px); 表示循环两次后面的宽度参数，一共六列
      grid-template-columns: repeat(auto-fill, 100px); auto-fill 按后面宽度参数排列充满整行，直到放不下为止。
      grid-template-columns: 1fr 1fr;    fr表示倍数
}

注：只有父组件直属的子盒子才有网格属性

<div>
     <p> //只有P标签有网格属性
          <b></b>
      </p>
</div>

子盒子属性

具体的设置占那些网格
  grid-column-start: 1; 列1（包括）开始，3（不包括）结束
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 4;
盒子行，列，占几个格子
grid-column-start: span 2;
grid-row-start: span 2;
或者
grid-column: 1;
grid-row: 1;