## 定義 grid佈局是指對網頁進行劃分成一個一個網格，然後根據自己的要求，可以任意組合。  以前寫類似的功能，很麻煩，需要寫很多的CSS去控制，有了grid就很方便了，可以隨意進行組合。 跟flex有很多地方相似，包括有部分屬性。不同的地方也很突出，尤其是flex是一維，只有橫向。而grid是有橫向和縱向。另外grid功能要更強大點。   ## 基本屬性 ### display 通過對父元素進行設定display:grid，表示裡面包裹的元素全是網格佈局。 ``` display:grid ``` ### grid-template-columns/grid-template-cols grid-template-columns：表示每行的寬度，有幾個表示每行有幾列，多出部分會往下排列 grid-template-cols：表示每列的寬度 ``` .grid{ display: grid; grid-template-columns: 50px 50px 50px 50px; grid-template-rows: 50px 50px 50px 50px; } ``` 以上的程式碼表示橫向的每個item寬度和高度是50px，多出一個就會被自動排佈下去。  #### 單位 單位既可以是px，也可以是百分比，或者用auto - px ``` .grid{ display: grid; grid-template-columns: 50px 50px 50px 50px; grid-template-rows: 50px 50px 50px 50px; } ```  - 百分比 ``` .grid{ display: grid; grid-template-columns: 33.33% 33.33% 33.33%; grid-template-rows: 33.33% 33.33% 33.33%; } ```  - auto 表示寬度或高度是剩餘的部分 ``` .grid{ display: grid; grid-template-columns: 33.33% 10% auto; grid-template-rows: 33.33% 20% auto; } ```  #### repeat() repeat()用來處理幾個item寬度相同的時候，避免寫相同的數值，或者是重複某種模式 ``` .grid{ display: grid; grid-template-columns: repeat(3,20%); grid-template-rows: repeat(3,20%); } ```  ``` .grid{ display: grid; grid-template-columns: repeat(3,100px 50px 100px); grid-template-rows: repeat(3,100px 50px 100px); } ```  #### auto-fill 當容器的寬度不確定，但是item的寬度確定，一行儘可能多的容納item，這時可以使用auto-fill ``` .grid{ display: grid; grid-template-columns: repeat(auto-fill,100px); } ```  #### fr 方便表示比例關係，使用fr來表示 ``` .grid{ display: grid; grid-template-columns: 1fr 2fr; } ``` 這表示後者是前者的2倍  fr也可跟px結合，會更方便 ``` .grid{ display: grid; grid-template-columns:100px 1fr 2fr; } ``` 上面程式碼表示第一列是100px，第二列是第三列的一半。  #### minmax 表示最大值最小值 ``` .grid{ display: grid; grid-template-columns:1fr 2fr minmax(100px,1fr); } ``` 上面程式碼表示，最小值不小於100px，最大值不大於1fr  ### row-gap，column-gap，gap row-gap：每行之間的間距 column-gap：每列之間的間距 gap：縮寫行/列間距 ``` .grid{ display: grid; grid-template-columns:1fr 2fr 1fr; row-gap: 10px; column-gap: 10px; } ``` 或者簡便的寫法：gap ``` .grid{ display: grid; grid-template-columns:1fr 2fr 1fr; gap: 10px; } ``` 上面程式碼表示行/列之間的間隔是10px  ### grid-area/grid-template-area grid-area和grid-template-area，用來劃分區域,grid-area用來指定item的名稱，grid-template-area根據子區域的名稱來排布，表示展現的方式 ``` .grid{ display: grid; grid-template-columns:100px 100px 100px; grid-template-rows: 100px 100px 100px; grid-template-areas: "div1 div1 div1" "div2 div3 div4" "div5 div6 div7" "div8 div9 div9"; } .div1{ grid-area: div1; background-color: tan; } ``` 上面程式碼表示div區域指代的grid的div1，整個頁面想展示的佈局是如下圖：  ### grid-auto-flow 網格佈局一般根據橫向依次排布，如果想豎向排序，可以設定grid-auto-flow ``` .grid{ display: grid; grid-template-columns:100px 100px 100px; grid-template-rows: 100px 100px 100px; grid-auto-flow: column; } ``` 上面的程式碼表示按照豎向排序。  ### justify-items/align-items/place-items justify-items/align-items類似，一個是水平方向上的展示，一個是垂直方向上的展示，屬性一致 ``` start：對齊起始位置 end：對齊結束位置 center：居中展示 stretch:拉伸至整個寬度 ``` justify-items：設定的是item的水平方向展現方式。 ``` .grid{ display: grid; grid-template-columns:100px 100px 100px; grid-template-rows: 100px 100px 100px; justify-items: center; } ``` 上面程式碼表示每個item居中展示  align-items：設定的是垂直方向上的展現方式。 ``` .grid{ display: grid; grid-template-columns:100px 100px 100px; grid-template-rows: 100px 100px 100px; align-items: center; } ``` 上面程式碼表示item在垂直方向上居中展示  place-items是align-items和justify-items的結合 ``` place-items: