场景：适用于固定模块展示，不适用于宽度缩小需要掉下一行的需求，不支持部分属性不支持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;
