如何快速學習 CSS Grid 佈局 - 相關資源和教程推薦

本文首發於：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

中文譯文：如何使用 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星推薦

文章地址：A Complete Guide to Grid

中文譯文：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 佈局只是時間問題。 如今是時候該學習了。

歡迎拍磚留言，更加歡迎推薦其餘相關相關優秀的資源和教程。