[譯] 你不需要基于 CSS Grid 的栅格布局系統

<b>本文講的是[譯] 你不需要基于 CSS Grid 的栅格布局系統，</b>

<b></b>

在過去的幾個星期裡，我開始看到基于 CSS Grid 的布局架構和栅格系統的出現。我們驚訝它為什麼出現的這麼晚。但除了使用 CSS Grid 栅格化布局，我至今還沒有看到任何架構能提供其他有價值的東西。他們沉醉于模仿過去的做法，而不是着眼于未來。這使得發展受到限制。其中一個常見的問題就是，這些架構仍需要在标記語言中使用行包裝器。

Grid 是一個栅格系統。它允許你在 CSS 中定義列和行，而不需要在标記語言中定義它們。你不需要其他工具幫助你實作一個看起來像栅格的效果，實際上它就是栅格！

傳統的設定布局的方法需要使用行包裝器進行标記的原因是，我們是通過為對象配置設定寬度的方式來僞造網格的。然後我們通過調整對象布局，進而在網格間制造出間隙。在一個基于 float 的網格布局中，你需要将每行元素包裝起來并清除浮動，以使下一行中的内容不浮動。在一個基于 Flex 的網格中，需要你對每行定義新的 Flex 容器，或者你需要恰當靈活地使用包裝器，<code>flex-basis</code> 和 <code>margin</code> 來獲得相同的效果。

Grid 不需要這些行包裝器，因為你已經定義了相應的行軌迹和用于對齊的線條。且不會有網格内的内容溢出到其他行的危險。 如果你定義了行包裝器，那麼每一行都将成為一個新的一維網格布局。如果你将自己限制在一個次元上，那使用 Grid 并沒有比 Flexbox 更好。

架構這個詞在這不是太恰當，但是我認為在一個團隊中，一套 Sass helper 在規範化使用 Grid 方面是很有幫助的。如果你已經探究了相關的規範，你會發現要實作相同效果，會有很多種不同的方法。你可以命名區域，使用行号或行名。你可能傾向于明确給出所有元素的位置，或是盡可能依賴于自動布局。如果團隊中的每個人都使用不同的方法，最終将使得編寫出來的代碼難以閱讀和維護。

對于代碼向後相容也是如此。如果你已經決定如何處理不支援 Grid 布局的浏覽器，某些工具可以幫助你確定你所做的決定能夠在不同的地方以相同的效果展現出來。此外，這種方法在項目開發層面上比直接導入其他公司的方法更有用。

在你開始使用新的“Grid Layout 架構”前，請確定你首先了解 Grid 網格布局的工作原理。知道你為什麼要建立一個抽象，它提供什麼以及使用它的副作用是什麼。

“Flexbox 與 Grid 有很大差別。如果你先使用了舊的方法來進行開發，那你将失去使用 Flexbox 和 Grid 進行創新的可能”。

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

建立規範的标記，整理那些過時了的沒有必要的元素。使用 Grid 和其他新方法來設計你的網站。然後, 你可以通過提供一些更簡單的東西, 來解決不支援新功能的浏覽器的相容問題。也許你的 Grid 布局設計使用了跨行等設計方案，這種效果很難在不支援額外标記方法的舊版本浏覽器中實作精準的布局。你可以使用 flexbox 做向後相容，建立一個沒有跨行的布局方案。雖然這樣不那麼整潔，但也完全可以使用，而且不需要為數量在逐漸減少的那部分使用者來增加額外标記。

如果把自己限制在過去，例如在舊的浏覽器中隻能使用 Grid 的部分功能，或使用那些自身受限的架構，那你就會失去使用 Grid 時産生創意的可能。既然這樣又何必使用 Grid？你也可以隻使用舊的代碼方案，但這的确很可惜。

<b>原文釋出時間為：2017年7月8日</b>

<b>本文來自雲栖社群合作夥伴掘金，了解相關資訊可以關注掘金網站。</b>