[譯] 趣味學習 CSS 佈局 —— 第二部分：網格佈局

• 原文地址：Fun places to learn CSS Layout –  Part 2: Grid Layout
• 原文做者：Stéphanie
• 譯文出自：掘金翻譯計劃
• 本文永久連接：github.com/xitu/gold-m…
• 譯者：EmilyQiRabbit
• 校對者：Alfxjx，sleepingxixi

趣味學習 CSS 佈局 —— 第二部分：網格佈局

兩年前（天吶原來已通過去兩年了！）我曾經寫過一份關於趣味學習 CSS 佈局 —— 第一部分：彈性盒的短篇文章。實話說，我很早以前就想寫一寫關於網格佈局的第二部分，可是一直沒有時間落實這個想法。我第一次談論到網格佈局是在六年前（又一次想感嘆，天吶！）即 2013 年的一篇文章中：響應式網頁設計現狀。該設計準則從那時候開始就吸引了個人注意，可是它當時還並不完善。

從那之後，前端發生了不少變化，如今大部分主流瀏覽器都支持網格佈局了。說到網格佈局標準，歸功於 Rachel Andrew 和 Jen Simmons 真是實至名歸！網格佈局是一個至關優秀的 CSS 屬性集合，它讓你能夠使用行、列來肯定一個網站網格佈局系統，並依照此係統放置元素。很酷吧？

若是你習慣使用老方法：float，那麼這種語法對於你可能會有些複雜，因此有不少有趣的網站、教程以及沙箱網站來幫助你學習並掌握網格佈局的一切內容。請享受這個過程吧！

法語版文章地址：Apprendre le positionnement en s’amusant – Partie 2 : Grid Layout

用來學習 CSS 網格佈局的遊戲

Grid Garden

在這個有意思的遊戲中，你要使用一些 CSS 網格佈局屬性來澆灌並照顧你的花園。遊戲的每一個關卡都會對不一樣的屬性做出解釋，你能夠使用它們來提高等級。

Grid Critters

這是一個價值 $139 的遊戲課程，它的設計完美，並可以教你如何能夠成爲一名 CSS 網格專家。我其實很但願能有一個「免費」的遊戲入門，這樣我就能試玩一下了。

獎勵關 —— CSS Diner

在這裏你能夠學習 CSS 網格，彈性盒以及其餘任何你想學的佈局，而若是你不能在頁面中選中你須要的，那可就不那麼有趣了。CSS 選擇器遊戲有 32 個級別，能讓你學習不少 CSS 選擇器。餓了嗎？遊戲由 @flukeout 製做。

CSS 網格佈局可視化遊戲場和生成器

有時候學習的最好方法是在瀏覽器裏直接玩一玩代碼和屬性。這些可視化的遊戲場工具能讓你使用網格搭建內容或者隨意玩一玩，以此幫你掌握它。

常見網格佈局實例

還有什麼學習方法能比實際查看代碼原理更好呢？這個網站（網站策劃是 Rachel Andrew）是一個很是棒的實例庫，解釋瞭如何使用 CSS 網格佈局構建不一樣的佈局。

網格可視化遊戲場

在這個多彩的遊戲場裏，你能夠試玩一個已經構建好的網格，並測試不一樣的屬性。做者是 @alialaa。

CSS Grid Generator

它是由 Sarah Edo 建立的工具，幫你構建屬於本身的網格系統

CSS 網格佈局生成器

另外一個能夠在瀏覽器裏幫助你建立網格模版的工具。但這個也支持 regions！由 Jacob Pratt 建立。

CSS 網格佈局備忘錄

CSS 技巧：網格佈局指南大全

這是一份很詳細的介紹，同時也是一份很實用的備忘錄，CSS Tricks 頁面包括了全部網格屬性。

GRID：一份簡單的關於 CSS 網格佈局的可視化備忘錄

這是一份超棒的可視化備忘錄，可讓你在點擊的時候複製/粘貼屬性。由 Malven Co. 建立

幾個有趣的演示

CSS Grid Floor Plan

爲何不能用 CSS 來佈置你的房間呢？這是由 Olivia Ng 製做的一個很酷的演示

一塊兒看幾個視頻吧！

視頻 —— 1 分鐘學習如何使用 CSS 網格佈局！

在這個有趣的視頻裏，Jenn Lukas 將會在一分鐘內爲你演示如何使用 CSS 網格佈局模塊來定義行和列。

Layout Land 頻道 —— CSS 網格佈局視頻教程

這是一個來自 youtube Layout Land 頻道的播放單，Jen Simmons 將會在視頻中爲你講解網格佈局基礎

cssgrid.io

這裏包括由 Wes Bos 建立的 25 個視頻，這些視頻由 Firefox 支持，能幫助你學習 CSS 網格佈局。

擴展閱讀

若是你須要更多經典資源，能夠查看：

• Rachel Andrew’s book 「Get Ready for CSS Grid Layout」
• Rachel Andrew 的文章「The New CSS Layout」
• 網站 Learn CSS Grid，它包含全部網格相關的屬性，能幫助裏理解它們是如何運做的
• CSS Grid for Designers —— 介紹了新技術是如何改變網頁佈局的
• Mozilla has a really cool step by step tutorial on CSS Grid Layout

您是否正在爲網頁或移動端應用招聘 UX 或者 UI 設計師？您的會議是否須要一個演講者，或者只是想了解個人更多信息？您能夠看看個人做品集並聯繫我。

若是發現譯文存在錯誤或其餘須要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可得到相應獎勵積分。文章開頭的 本文永久連接 即爲本文在 GitHub 上的 MarkDown 連接。

---

掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源爲 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。