場(chǎng)景：適用于固定模塊展示，不適用于寬度縮小需要掉下一行的需求丛楚，不支持部分屬性不支持IE11
行和列才能組成網(wǎng)格族壳，所以在網(wǎng)格布局中行和列是重要參數(shù)
父盒子需設(shè)置display:grid;
div:{
設(shè)置網(wǎng)格布局
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%
行數(shù)，列數(shù)較多可以簡(jiǎn)寫(xiě)
grid-template-columns: repeat(4, 25%);
grid-template-rows: repeat(3, 33.33%);
grid-template-columns: repeat(2, 100px 50px 80px); 表示循環(huán)兩次后面的寬度參數(shù)坏平，一共六列
grid-template-columns: repeat(auto-fill, 100px); auto-fill 按后面寬度參數(shù)排列充滿整行拢操，直到放不下為止。
grid-template-columns: 1fr 1fr; fr表示倍數(shù)
}
注：只有父組件直屬的子盒子才有網(wǎng)格屬性
<div>
<p> //只有P標(biāo)簽有網(wǎng)格屬性
<b></b>
</p>
</div>
子盒子屬性
具體的設(shè)置占那些網(wǎng)格
grid-column-start: 1; 列1（包括）開(kāi)始舶替，3（不包括）結(jié)束
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 4;
盒子行令境，列，占幾個(gè)格子
grid-column-start: span 2;
grid-row-start: span 2;
或者
grid-column: 1;
grid-row: 1;
