Gird Layout代碼解釋

1 <div class="wrapper">    <!--定義一個類名爲wrapper的div盒子-->
2   <div class="one">One</div>  <!--定義一個類名爲one的div盒子-->
3  <div class="two">Two</div> <!-- 定義一個類名爲two的div盒子-->
4 <div class="three">Three</div><!--定義一個類名爲three的div盒子-->
5  <div class="four">Four</div> <!--定義一個類名爲four的div盒子-->  
6 <div class="five">Five</div>  <!--定義一個類名爲five的div盒子-->
7   <div class="six">Six</div>  <!-- 定義一個類名爲six的div盒子-->
8 </div>

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