首先，你必須使用 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

grid layout