gridlayout代碼註釋

<div class="wrapper">             //定義一節或者一部分區域，它的css樣式對應的css中class選擇器的wrapper
<div class="one">One</div>        //這個區域名字叫作one
<div class="two">Two</div>        //這個區域名字叫作two
<div class="three">Three</div>    //這個區域名字叫作three
<div class="four">Four</div>     //這個區域名字叫作four
<div class="five">Five</div>     //這個區域名字叫作five
<div class="six">Six</div>       //這個區域名字叫作six
</div>      div結束的標籤

.wrapper {    //帶有指定類的元素
  display: grid;  //定義一個容器屬性爲網格佈局
  grid-template-columns: repeat(3, 1fr);  //利用空格分隔的值定義網格的列和行。grid-template-columns和grid-template-rows屬性來定義網格中的行和列。這些屬性定義了網格的軌道。一個網格軌道就是網格中任意兩條線之間的空間。值的大小，而且他們之間的空格表示網格線
  grid-gap: 10px;  //定義垂直(水平)欄與垂直(水平)欄之間的間距
  grid-auto-rows: minmax(100px, auto);//用minmax()做爲grid-auto-rows的值。自動建立的行高將會是最小100px，最大爲auto。用auto意味着行的尺寸將會根據內容的大小的來自動變換
}
.one {
  grid-column: 1 / 3;  //設置網格項目列方向的開始位置爲1的網格線和結束爲3的網格線
  grid-row: 1;        //設置網格項目行方向的開始和結束位置都爲1的網格線
}
.two { 
  grid-column: 2 / 4;  //設置網格項目列方向開始位置爲2的網格線和結束位置爲4的網格線
  grid-row: 1 / 3;    //設置網格項目行方向開始位置爲1的網格線和結束位置爲3的網格線
}
.three {
  grid-column: 1;    //設置網格項目列方向開始位置和結束位置都爲1的網格線
  grid-row: 2 / 5;  //設置網格項目行方向開始位置爲2的網格線和結束位置爲5的網格線
}
.four {
  grid-column: 3;    //設置網格項目列方向開始位置和結束位置都爲3的網格線
  grid-row: 3;     //設置網格項目行方向開始和結束位置都爲3的網格線
}
.five {
  grid-column: 2;    //設置網格列方向開始位置和結束位置都爲2的網格線
  grid-row: 4;      //設置網格行方向開始位置和結束位置都爲4的網格線
}
.six {
  grid-column: 3;    //設置網格列方向開始位置和結束位置都爲3的網格線
  grid-row: 4;      //設置網格行方向開始位置和結束位置都爲4的網格線
}