場景：適用于固定模塊展示，不適用于寬度縮小需要掉下一行的需求，不支持部分屬性不支持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ù)較多可以簡寫
      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（包括）開始，3（不包括）結(jié)束
  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;