重點摘要
如果您熟悉 Flexbox，應該對 Grid 感到熟悉。Rachel Andrew 提供一個專為 CSS Grid 打造的優質網站，可協助您開始使用這項服務。Google Chrome 現已支援格線。
Flexbox？格線？
過去幾年來，CSS Flexbox 已變得廣泛使用，瀏覽器支援功能也相當不錯 (除非您是支援 IE9 及以下版本的不良感受之一)。Flexbox 可以更輕鬆地執行許多複雜的版面配置工作，例如元素之間的平衡間距、由上到下的版面配置，或是 CSS 奇妙的垂直置中：垂直置中。
不過，螢幕通常有一個必須擔心的第二個維度。沒辦法自行調整元素大小，不巧幸的是單用 Flexbox 就不能「同時」採用垂直和水平節奏。CSS 格線助您一臂之力
CSS Grid 一直處於開發階段，在大多數瀏覽器中，標記已超過 5 年的時間，也一直投入更多時間處理互通性問題，以免發生 Flexbox 這類錯誤這類錯誤。因此，如果您使用格狀檢視畫面在 Chrome 中實作版面配置，Firefox 和 Safari 可能都會得到相同的結果。在本文撰寫期間，Microsoft 的 Grid 的 Grid 實作方式已過時 (與 IE11 中相同)，而且更新屬於「考慮中」。
雖然概念和語法有相似之處，但請不要將 Flexbox 和 Grid 視為不同的版面配置技巧。格線在二維空間中排列，Flexbox 則排在其中。因此同時使用兩者時會出現協同情況。
定義格線
為了熟悉 Grid 的個別屬性，我非常推薦 Raachel Andrew 的「Grid By」範例或 CSS 測試的一覽表。如果您熟悉 Flexbox，應該熟悉許多屬性和其意義。
接著來看看標準的 12 欄格狀版面配置。傳統的 12 欄版面配置很常見，因為數字 12 可由 2、3、4 和 6 除盡，因此對許多設計都很實用。讓我們實作這個版面配置：
首先從標記程式碼開始：
<!DOCTYPE html>
<body>
<header></header>
<nav></nav>
<main></main>
<footer></footer>
</body>
在樣式表中，我們先展開 body，以便涵蓋整個可視區域並轉換為格線容器：
html, body {
width: 100vw;
min-height: 100vh;
margin: 0;
padding: 0;
}
body {
display: grid;
}
我們現在使用的是 CSS 格線訂閱成功！
下一步是實作格線的列和欄。我們可以模擬模擬中的所有 12 個資料欄，但由於並未使用所有資料欄，這麼做會讓 CSS 遭到不必要的混亂。為求簡單起見，我們會以下列方式實作版面配置：
標頭和頁尾寬度不同，內容在兩個維度中都是變數。導覽在這兩個維度中也會發生變數，但我們將最小寬度設為 200 像素。(原因為何？當然，我要展示 CSS 格線的功能)
在 CSS 格線中，這組資料欄和資料列稱為「追蹤」。我們先定義第一組音軌，也就是資料列：
body {
display: grid;
grid-template-rows: 150px auto 100px;
}
grid-template-rows 採用定義個別資料列的大小序列。在這個範例中，我們為第一列設定 150px 的高度，最後為 100px 的最後一個像素。
中間列設為 auto，表示它會配合所需的高度，以配合該資料列中的格線項目 (格狀容器的子項)。由於我們的主體會延伸至整個可視區域，因此含有內容的軌跡 (上圖的黃色) 至少會填滿所有可用空間，但如果有必要的話，則會放大文件並捲動畫面。
我們想針對資料欄採用更具動態效果的方法：我們希望導覽與內容都能成長 (並縮小)，但我們希望導覽功能絕不會縮減到 200px 以下，而且我們希望內容大於導覽功能。在 Flexbox 中，我們使用 Flex 增加的 Flex 縮減
body {
display: grid;
grid-template-rows: 150px auto 100px;
grid-template-columns: minmax(200px, 3fr) 9fr;
}
必須定義 2 個資料欄，第一個資料欄是使用 minmax() 函式定義，該函式需要 2 個值：該軌跡的最小值和大小上限。(看起來就像其中一個 min-width 和 max-width。)寬度下限為 200 像素 (如先前所述)。寬度上限為 3fr。fr 是格狀專用的單位，可讓您將可用空間分配到格線元素。fr 可能代表「fraction unit」表示，但可能很快表示可用單位。這裡的值表示這兩個資料欄會擴大並填滿螢幕，但內容欄寬度一律為導覽欄寬度的 3 倍 (前提是導覽欄維持大於 200 像素)。
雖然格線項目的位置仍不正確，但資料列和資料欄的「大小」可以正常運作，並產生我們的目標是：
放置項目
格線最強大的功能之一，就是能夠輕鬆放置項目，而不受 DOM 順序影響。(不過，由於螢幕閱讀器會瀏覽 DOM，因此強烈建議您留意，確保元素可正常存取。)如未手動設定，元素會按 DOM 順序排列，並由左至右、由上往下排列。每個元素會佔用一個 cell。網格填入的順序可以使用 grid-auto-flow 變更。
那麼，該如何放置元素呢？想放置格線項目最簡單的方法，就是定義這些項目所涵蓋的欄和列。格線提供兩種語法： 您在第一個語法中定義起點和終點在第二個中，您會定義起點和 Span：
header {
grid-column: 1 / 3;
}
nav {
grid-row: 2 / span 2;
}
我們想將標題放在第一欄，並在第 3 欄之前。 導覽面板應從第二列開始，並橫跨 2 列。
技術上來說，我們已完成版面配置的實作，現在我想向您展示幾個格線所提供的便利功能，讓您更容易放置。第一項功能是您可以為軌跡邊框命名，並以這些名稱做為位置名稱：
body {
display: grid;
grid-template-rows: 150px [nav-start] auto 100px [nav-end];
grid-template-columns: [header-start] minmax(200px, 3fr) 9fr [header-end];
}
header {
grid-column: header-start / header-end;
}
nav {
grid-row: nav-start / nav-end;
}
上述程式碼會產生與之前程式碼相同的版面配置。
更強大的功能就是為網格中的整個區域命名的功能：
body {
display: grid;
grid-template-rows: 150px auto 100px;
grid-template-columns: minmax(200px, 3fr) 9fr;
grid-template-areas: "header header"
"nav content"
"nav footer";
}
header {
grid-area: header;
}
nav {
grid-area: nav;
}
grid-template-areas 採用以空格分隔的名稱字串，讓開發人員能夠為每個儲存格命名。如果相鄰儲存格的名稱相同，系統會將其合併到同一個區域。這樣一來，您可以為版面配置程式碼提供更多語意，讓媒體查詢更直覺化。同樣地，這個程式碼會產生與之前相同的版面配置。
還有其他功能嗎？
是，我有太多，在單一網誌文章中涵蓋太多內容。 Rachel Andrew 也是 GDE 的成員，也是 CSS 工作團隊的受邀專家，從一開始就持續與他們合作，確保 Grid 能夠簡化網頁設計。她甚至在上面寫了一本書籍。她的網站「Grid by Example」是熟悉格線的重要資源。許多人認為 Grid 是網頁設計的革命性步驟，現在 Chrome 已預設啟用這項功能，讓您可以立即開始使用。