你不須要基於 CSS Grid 的柵格佈局系統

在過去的幾個星期裏，我開始看到基於 CSS Grid 的佈局框架和柵格系統的出現。咱們驚訝它爲何出現的這麼晚。但除了使用 CSS Grid 柵格化佈局，我至今尚未看到任何框架能提供其餘有價值的東西。他們沉醉於模仿過去的作法，而不是着眼於將來。這使得發展受到限制。其中一個常見的問題就是，這些框架仍須要在標記語言中使用行包裝器。

爲何 Grid 有些不一樣？

Grid 是一個柵格系統。它容許你在 CSS 中定義列和行，而不須要在標記語言中定義它們。你不須要其餘工具幫助你實現一個看起來像柵格的效果，實際上它就是柵格！

傳統的設置佈局的方法須要使用行包裝器進行標記的緣由是，咱們是經過爲對象分配寬度的方式來僞造網格的。而後咱們經過調整對象佈局，從而在網格間製造出間隙。在一個基於 float 的網格佈局中，你須要將每行元素包裝起來並清除浮動，以使下一行中的內容不浮動。在一個基於 Flex 的網格中，須要你對每行定義新的 Flex 容器，或者你須要恰當靈活地使用包裝器，flex-basis 和 margin 來得到相同的效果。

Grid 不須要這些行包裝器，由於你已經定義了相應的行軌跡和用於對齊的線條。且不會有網格內的內容溢出到其餘行的危險。 若是你定義了行包裝器，那麼每一行都將成爲一個新的一維網格佈局。若是你將本身限制在一個維度上，那使用 Grid 並無比 Flexbox 更好。

基於 Grid 的佈局框架有什麼值得借鑑的地方？

框架這個詞在這不是太恰當，可是我認爲在一個團隊中，一套 Sass helper 在規範化使用 Grid 方面是頗有幫助的。若是你已經探究了相關的規範，你會發現要實現相同效果，會有不少種不一樣的方法。你能夠命名區域，使用行號或行名。你可能傾向於明確給出全部元素的位置，或是儘量依賴於自動佈局。若是團隊中的每一個人都使用不一樣的方法，最終將使得編寫出來的代碼難以閱讀和維護。

對於代碼向後兼容也是如此。若是你已經決定如何處理不支持 Grid 佈局的瀏覽器，某些工具能夠幫助你確保你所作的決定可以在不一樣的地方以相同的效果展示出來。此外，這種方法在項目開發層面上比直接導入其餘公司的方法更有用。

在你開始使用新的「Grid Layout 框架」前，請確保你首先了解 Grid 網格佈局的工做原理。知道你爲何要建立一個抽象，它提供什麼以及使用它的反作用是什麼。

擁抱新的可能

我剛剛從 Patterns Day 回來，而且 個人一張幻燈片在 Twitter 上被說起了好幾回：

「Flexbox 與 Grid 有很大區別。若是你先使用了舊的方法來進行開發，那你將失去使用 Flexbox 和 Grid 進行創新的可能」。

上面這張 PPT 的背景是處理老版本的瀏覽器，也就是處理瀏覽器兼容問題。我鼓勵人們首先考慮新的瀏覽器。要開始使用良好的標記, 首先要爲那些支持 Grid 和 Flexbox 等的瀏覽器進行設計。若是你從舊版本的瀏覽器開始，會讓他們的性能成爲限制你能力的因素。

建立規範的標記，整理那些過期了的沒有必要的元素。使用 Grid 和其餘新方法來設計你的網站。而後, 你能夠經過提供一些更簡單的東西, 來解決不支持新功能的瀏覽器的兼容問題。也許你的 Grid 佈局設計使用了跨行等設計方案，這種效果很難在不支持額外標記方法的舊版本瀏覽器中實現精準的佈局。你可使用 flexbox 作向後兼容，建立一個沒有跨行的佈局方案。雖然這樣不那麼整潔，但也徹底可使用，並且不須要爲數量在逐漸減小的那部分用戶來增長額外標記。

你能夠 點擊這來看相關示例。這是我發佈在 Grid by Example 上的數個帶有向後兼容方案的模式之一。

若是把本身限制在過去，例如在舊的瀏覽器中只能使用 Grid 的部分功能，或使用那些自身受限的框架，那你就會失去使用 Grid 時產生創意的可能。既然這樣又何須使用 Grid？你也能夠只使用舊的代碼方案，但這的確很惋惜。

若是你在尋找柵格框架時找到本文，那你找對地方啦！學習並使用 CSS Grid 佈局，可能你沒有必要再找除此以外的材料了。

• 原文地址：You do not need a CSS Grid based Grid System
• 原文做者：Rachel Andrew

歡迎你們在評論區留下你的想法和感覺！

---

歡迎你們關注知乎專欄：全棧成長之路

文章保質保量 (づ￣3￣)づ╭?～

也歡迎你們加入學習交流QQ羣：637481811

本文首發於個人 我的網站 LeviDing ，更多內容歡迎關注個人我的網站。
歡迎掃描上方二維碼關注 公衆號: LeviDing 訂閱實時動態。