本文首發於：www.css88.com/archives/86…
這篇文章是 CSS Grid 佈局有用的資源和教程，幫你快速瞭解相關知識。同時還比較了 CSS Grid 、 Flexbox 、 Table 佈局之間的區別，及適用情況。
CSS Grid 佈局今年真的很火。該佈局系統規範最近獲得了主流瀏覽器的支援，包括最新版本的 Firefox，Chrome，Opera，Safari和 Edge 。 這裡我分享一大堆資源，方便你快速學習。
5分鐘學會 CSS Grid 佈局
❤️❤️❤️❤️❤️ 5星推薦
文章地址：Learn CSS Grid in 5 Minutes
中文譯文：5分鐘學會 CSS Grid 佈局
強烈建議你將這篇文章作為你 Grid 佈局的最簡入門，文章很短，你甚至不需要5分鐘就能讀完。文章剔除了你不剛入門不需要關係的術語和複雜的屬性，只是為了讓你瞭解最基礎的 Grid 佈局知識。結合程式碼和圖示，非常言簡意賅，淺顯易懂。或許通過這篇文章可以讓你對 Grid 佈局產生濃厚的興趣。不管學習什麼，剛入門時的興趣和成就感是非常重要的，這也是我推薦這篇文章作為你最簡入門的原因。
如何使用 CSS Grid 快速而又靈活的佈局
❤️❤️❤️❤️❤️ 5星推薦
文章地址：How to prototype websites quickly with CSS Grid
這篇文章是 5 分鐘學會 CSS Grid 佈局 的續文，主要讓你理解和體會使用 CSS Grid 如何快速又靈活的佈局。文章講述了下圖所示的各種佈局實現，你自己動手也非常方便。順帶也講了結合響應式佈局的示例。
使用 Grid 實現的響應式佈局
❤️❤️❤️❤️❤️ 5星推薦
文章地址：How to make your HTML responsive by adding a single line of CSS
中文譯文：一行 CSS 程式碼實現響應式佈局 - 使用 Grid 實現的響應式佈局
這篇文章介紹瞭如何使用 Grid 實現響應式佈局，令人驚奇的是，真的只用了一行 CSS 程式碼實現，沒有亂七八糟的樣式名，也不用為每一個螢幕尺寸建立媒體查詢。大大節省了很多程式碼和枯燥無謂的計算，輕鬆搞定內容區塊的響應式佈局。
CSS Grid 佈局完全指南(圖解 Grid 詳細教程)
❤️❤️❤️❤️❤️ 5星推薦
中文譯文：CSS Grid 佈局完全指南(圖解 Grid 詳細教程)
如果你已經對 Grid 佈局有了一定的瞭解，產生了濃厚的興趣，那麼我建議你完整閱讀這篇指南。這篇指南詳細介紹了 CSS Grid 知識，包括 Grid 佈局相關的術語，網格容器和網格項中每一個屬性。並且每個術語和屬性都配備了相應的程式碼和圖片示例，所以學習起來也非常輕鬆好理解。這篇指南還可以作為你平時工作和學習中的字典工具，想用的時候隨時翻一下，非常實用和方便，建議收藏。
CSS Grid VS Flexbox VS Table 佈局，比較及適用情況
❤️❤️❤️❤️❤️ 5星推薦
CSS 網頁佈局一直以來都存在這樣或那樣的問題，被前端開發人員所詬病。不管是用表格（table），浮動（float），定位（postion）和 內嵌塊（inline-block），本質上都是隻是佈局的 hack 而已。Flexbox 的出現很大程度上改善了我們的佈局方式。所以在我們討論 Grid 佈局系統時，總是擾不過和 Flexbox 佈局的比較，甚至是和 Table 佈局的比較。下面是一些總結：
- Grid 佈局和 Flexbox 佈局在子元素排列和對齊上非常相似，甚至連排列和對齊的屬性名和相應的屬性值都是一樣的，所以你如果熟悉 Flexbox 佈局，那麼學習 Grid 佈局應該可以節省很多時間。
- Grid 佈局適用於佈局整體頁面。它們使頁面的整體佈局變得非常簡單，而且快速。你甚至可以處理一些不規則和非對稱的佈局設計。
- Flexbox 佈局非常適合對齊元素內的內容排版。比如說某一導航元件，某一內容板塊非常適合使用 Flexbox 佈局。
- Grid 佈局適用於二維佈局系統，通過行 與 列進行佈局。
- Flexbox 佈局適用於一維佈局系統，通過行 或 列進行佈局。
- 從佈局系統設計目的的角度來說，二者沒有可比性，同時學習它們，並配合使用，你會發現頁面佈局是如此的簡單和靈活。
Grid 和 Flexbox 比較和相似之處，以及適用情況應該很清楚了。建議檢視：CSS Grid VS Flexbox：例項比較 以瞭解更多的資訊。
那麼我們再來看看 Grid 和 Table 佈局的比較：
當然我們這裡說 Table 佈局 不是用 HTML <table> 標籤組進行佈局，這種表格標籤佈局是開發人員的禁忌，致命的原因是佈局和標籤無法分離，如果你要改佈局，不得不修改相應的 HTML 標籤結構。我們這裡討論的 Table 佈局是使用 display:table,display:table-row,display:table-cell 等屬性將 HTML 元素像 <table> 標籤組一樣進行佈局。
對於屬性 Table 佈局的前端開發工程師來說，第一眼看到 Grid 佈局的介紹都會說：咦，這不是有一個新的 Table 佈局嗎 ？確實 Table 佈局 也是通過行 和 列進行佈局的系統，很多概念上兩者非常相似，甚至可以說幾乎一樣。Table 佈局 其實是 HTML <table> 標籤組佈局的延續和升級，很大程度主要解決了 佈局樣式 和 標籤結構 分離的問題。但是其他問題並沒有解決，對於複雜的佈局來說， Table 佈局顯得有點捉襟見肘，很多複雜的佈局都需要巢狀多層 HTML 標籤，而且難度無異於手寫一個複雜的 HTML <table> 標籤組。所以從本質上講， Table 佈局並沒有從根本上解決 佈局樣式 和 標籤結構 分離的問題。
不可否認的是，Table 佈局的相容性比 Flexbox 和 Grid 佈局都要好，它可以相容到IE8。
關於 Table 佈局的一些應用例項和相關說明可以檢視：CSS Table佈局-display:table
而 Grid 佈局這時真正做到了 佈局樣式 和 HTML 標籤結構分離，從上面文章的示例中，我們都可以看到， Grid 佈局永遠都是網格容器和網格項，真正做到了 HTML 標籤只作為內容容器，所有表現事情都讓 CSS 去解決。
CSS Grid 網格佈局入門
❤️❤️❤️ 3星推薦
文章地址：Getting Started with CSS Grid Layout
中文譯文：CSS Grid 網格佈局入門
這篇文章用一些例項講述了 Grid 網格佈局中的一些概念和術語。沒什麼特點，不過不可以作為一篇入門學習文章。
CSS Grid 佈局示例大全
❤️❤️❤️ 3星推薦
CSS Grid 佈局示例集合，各種各樣的佈局都可以這裡找到，已經你可以看到一些靈活的佈局變化。CSS Grid 佈局示例大全 。示例大多來自：gridbyexample.com/，這個網站也收集了很多關於 Grid 佈局 的指南和文章，有興趣建議閱讀一下。
CSS Grid 佈局除錯
❤️❤️❤️❤️❤️ 5星推薦
CSS Grid 佈局作為新 CSS 中的新系統，在使用過程中難免碰到需要除錯的時候，這裡推薦一下 Firefox DevTools，在除錯 Grid 佈局方面比 Chrome 的開發者工具強很多。你可以檢視 Firefox DevTools 除錯 Grid 佈局的介紹文章：Debugging CSS Grid Layouts With Firefox Grid Inspector，也可以看大漠的譯文：使用Firefox 網格檢查器除錯 CSS網格佈局
邊玩遊戲邊學 Grid 網格佈局
❤️❤️❤️ 3星推薦
這裡給大家介紹一個邊玩遊戲邊學習 Grid 網格佈局的網站，將枯燥的說明文件瞬間變成有趣、又更易理解。
GRID GARDEN：cssgridgarden.com/
這裡也從github上下了一個，作為映象網頁：www.css88.com/tool/gridga…
相應的 邊玩遊戲邊學 Flexbox 佈局 請檢視：www.css88.com/archives/65…
一句話總結
在生產中使用 CSS Grid 佈局只是時間問題。 現在是時候該學習了。
歡迎拍磚留言，更加歡迎推薦其他相關相關優秀的資源和教程。