術語：Grid

Grid 是二維網格系統。它可以用來構建複雜的佈局以及較小的介面。

屬性：grid-template-columns

定義列，按照你希望它們在網格中出現的順序，把grid -template-columns屬性設定為列大小

.grid {
    display: grid;
    grid-template-columns: 100px 100px 100px; // 定義三個寬度為100px的單元格
}

屬性：grid-template-rows

grid-template-rows用於定義網格中行的數量和大小。

.grid {
    display: grid;
    grid-template-columns
 
: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px; // 高度 與‘columns’類似
}

屬性：grid-template

grid是grid-template-rows、grid-template-columns和grid-template-areas三個屬性的簡寫。

.grid {
    display: grid;
    grid-template:
        "header header  header" 80px
        "nav    article article" 600px
        / 100px 1fr
 
;
}

屬性：fr

fr是為css網格佈局建立的新單位。fr使你不需要計算百分比就能建立靈活的網格，1fr表示可用空間的一等份。

.grid {
    display: grid;
    grid-template-columns: 3fr 4fr 3fr; // 寬度分為3+4+3=10個等份，4個單元格分別佔3、4、3份
    grid-template-columns: 3fr 4fr 3fr 2fr; // 寬度分為3+4+3+2=12個等份，4個單元格分別佔3、4、3、2份
}

屬性：grid-auto-flow

grid-auto-flow屬性控制網格單元如何流入網格，其預設值為row。網格中的“網格單元”將會被一一填充，直到沒有剩餘的專案為止。

.grid {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-auto-flow: column;
}

函式：repeat()

repeat()函式有助於使網格軌道列表變得不是那麼多餘，併為其添加了語義層。

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr 2fr); // 重複3次的 1fr 2fr。 還可以是：grid-template-columns:2fr repeat(5，1fr) 4fr;
}