Grid Layout

Grid Layout

.wrapper {
  display: grid;    

 

 

  //建立一個網格容器，全部容器子結點自動成爲容器項目,grid: 生成塊級網絡inline-grid: 生成行內網格,sub grid: 若是容器自己是網格項，用來繼承父容器的行列大小

  grid-template-columns: repeat(3, 1fr);

// grid-template指網絡板， grid-template-columns:稱做網絡模板列，與網格模板區域（grid-template-areas）、網格模板行（grid-template-rows）兩個屬性共同顯示定義一個網格容器。任何由網格模板區域定義的行或列但沒有在網格模板行/網格模板列中定義尺寸，則由grid-auto-rows或grid-auto-columns屬性來肯定大小。grid-template-columns屬性指定網格列的軌道列表。repeat()接受兩個參數：第一個參數定義網格軌道應該重複的次數，第二個參數定義每一個軌道的尺寸。若是你的定義中包含重複的部分，你能夠使用 repeat() 表示法進行精簡，fr是一個彈性尺寸單位，能夠幫助咱們建立一個彈性的網格軌道。fr 單位容許你將一個軌道大小設置爲網格容器內自由空間的一小部分。

  grid-gap: 10px;//指定網格線的大小，也能夠說是網格子項之間的間距。且間隔僅僅做用在網格子項之間，不在容器邊緣,grid-gap是grid-row-gap和grid-column-gap兩個屬性的縮寫，若是它指定了兩個值，那麼第一個值是設置grid-row-gap的值，第二個值設置grid-column-gap的值。若是隻設置了一個值，表示行和列的間距相等，也就是說grid-row-gap和grid-column-gap的值相同。注意：grid-gap只能建立列與列或行與行之間的間距，但不能建立列和行與網格容器邊緣的間距。間距能夠設置任何非負值，長度值能夠是px、%、em等單位值。

  grid-auto-rows: minmax(100px, auto);   //grid-auto-rows屬性指定隱式建立的網絡行跟蹤的大小。 自動生成隱式網格軌道（行和列），當你定位網格項超出網格容器範圍時，將自動建立隱式網格軌道，網格最小衛100；

}
.one {
  grid-column: 1 / 3;//定義.one從網格線第一行開始到第二行結束

  grid-row: 1;//定義.one從網格線第一行開始到第二行結束

//grid-row是grid-row-start和grid-row-end的簡寫。經過貢獻一條線，一個跨度，或全無（自動），以它的網格位置，從而指定的直列開始和直列邊緣指定網格行內的網格項的大小和位置其網絡面積。若是隻提供一個值，則指定了grid-row-start值；若是提供兩個值，第一個是grid-row-start的值，第二個是grid-row-end的值，二者之間必需要用「/」隔開。（默認值爲auto)
  background: lavender;//背景色：淡紫色；
}

.two { 
  grid-column: 2 / 4;//定義.one從網格線第二列開始到第四列結束
  grid-row: 1 / 3;//定義.one從網格線第一行開始到第三行結束
  background: lavender;//背景色：淡紫色；
}
.three {
  grid-column: 1;//定義.one網格線第一列

grid-row: 2 / 5;//定義.one從網格線第二行開始到第五行結束
}
.four {
  grid-column: 3;//定義.one網格線第三列
  grid-row: 3;//定義.one網格線第三行
}
.five {
  grid-column: 2;//定義.one網格線第二列

  grid-row: 4;//定義.one網格線第四列}.six {  grid-column: 3;//定義.one網格線第三列  grid-row: 4;//定義.one網格線第四列}