grid layout

首先，你必須使用 display:grid 將容器元素定義爲一個 grid(網格) 佈局，使用 grid-template-colunms 和  grid-template-rows 設置 列 和 行 的尺寸大小，而後經過 grid-colunm 和 grid-row 將其子元素放入這個 grid(網格) 中。

grid-template-colunms:是設置整個網格的每列的寬度.

grid-template-rows:是設置整個網格的每行的高度.

frl至關與一個長度單位

1fr = (網格寬度 - 3rem - 網格寬度 * 25%) / 3;

repeat()能夠建立重複的網格軌道。這個適用於建立相等尺寸的網格項目和多個網格項目。repeat()接受兩個參數：第一個參數定義網格軌道應該重複的次數，第二個參數定義每一個軌道的尺寸。

 grid-colunm:x/y設置從哪列到哪列;

 grid-row:x/y設置從哪行到哪行;

grid-area:若是指定四個值，第一個值對應grid-row-start，第二個值對應grid-column-start，第三個值對應grid-row-end，第四個值對應grid-column-end

 grid-template-areas