摘要：在過去的幾個(gè)星期里，我開始看到基于的布局框架和柵格系統(tǒng)的出現(xiàn)。你可能傾向于明確給出所有元素的位置，或是盡可能依賴于自動(dòng)布局。

在過去的幾個(gè)星期里，我開始看到基于 CSS Grid 的布局框架和柵格系統(tǒng)的出現(xiàn)。我們驚訝它為什么出現(xiàn)的這么晚。但除了使用 CSS Grid 柵格化布局，我至今還沒有看到任何框架能提供其他有價(jià)值的東西。他們沉醉于模仿過去的做法，而不是著眼于未來。這使得發(fā)展受到限制。其中一個(gè)常見的問題就是，這些框架仍需要在標(biāo)記語言中使用行包裝器。

Grid 是一個(gè)柵格系統(tǒng)。它允許你在 CSS 中定義列和行，而不需要在標(biāo)記語言中定義它們。你不需要其他工具幫助你實(shí)現(xiàn)一個(gè)看起來像柵格的效果，實(shí)際上它就是柵格！

傳統(tǒng)的設(shè)置布局的方法需要使用行包裝器進(jìn)行標(biāo)記的原因是，我們是通過為對(duì)象分配寬度的方式來偽造網(wǎng)格的。然后我們通過調(diào)整對(duì)象布局，從而在網(wǎng)格間制造出間隙。在一個(gè)基于 float 的網(wǎng)格布局中，你需要將每行元素包裝起來并清除浮動(dòng)，以使下一行中的內(nèi)容不浮動(dòng)。在一個(gè)基于 Flex 的網(wǎng)格中，需要你對(duì)每行定義新的 Flex 容器，或者你需要恰當(dāng)靈活地使用包裝器，flex-basis 和 margin 來獲得相同的效果。

Grid 不需要這些行包裝器，因?yàn)槟阋呀?jīng)定義了相應(yīng)的行軌跡和用于對(duì)齊的線條。且不會(huì)有網(wǎng)格內(nèi)的內(nèi)容溢出到其他行的危險(xiǎn)。 如果你定義了行包裝器，那么每一行都將成為一個(gè)新的一維網(wǎng)格布局。如果你將自己限制在一個(gè)維度上，那使用 Grid 并沒有比 Flexbox 更好。

框架這個(gè)詞在這不是太恰當(dāng)，但是我認(rèn)為在一個(gè)團(tuán)隊(duì)中，一套 Sass helper 在規(guī)范化使用 Grid 方面是很有幫助的。如果你已經(jīng)探究了相關(guān)的規(guī)范，你會(huì)發(fā)現(xiàn)要實(shí)現(xiàn)相同效果，會(huì)有很多種不同的方法。你可以命名區(qū)域，使用行號(hào)或行名。你可能傾向于明確給出所有元素的位置，或是盡可能依賴于自動(dòng)布局。如果團(tuán)隊(duì)中的每個(gè)人都使用不同的方法，最終將使得編寫出來的代碼難以閱讀和維護(hù)。

對(duì)于代碼向后兼容也是如此。如果你已經(jīng)決定如何處理不支持 Grid 布局的瀏覽器，某些工具可以幫助你確保你所做的決定能夠在不同的地方以相同的效果展現(xiàn)出來。此外，這種方法在項(xiàng)目開發(fā)層面上比直接導(dǎo)入其他公司的方法更有用。

在你開始使用新的“Grid Layout 框架”前，請(qǐng)確保你首先了解 Grid 網(wǎng)格布局的工作原理。知道你為什么要?jiǎng)?chuàng)建一個(gè)抽象，它提供什么以及使用它的副作用是什么。

我剛剛從 Patterns Day 回來，并且 我的一張幻燈片在 Twitter 上被提及了好幾次：

“Flexbox 與 Grid 有很大區(qū)別。如果你先使用了舊的方法來進(jìn)行開發(fā)，那你將失去使用 Flexbox 和 Grid 進(jìn)行創(chuàng)新的可能”。

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

創(chuàng)建規(guī)范的標(biāo)記，整理那些過時(shí)了的沒有必要的元素。使用 Grid 和其他新方法來設(shè)計(jì)你的網(wǎng)站。然后, 你可以通過提供一些更簡(jiǎn)單的東西, 來解決不支持新功能的瀏覽器的兼容問題。也許你的 Grid 布局設(shè)計(jì)使用了跨行等設(shè)計(jì)方案，這種效果很難在不支持額外標(biāo)記方法的舊版本瀏覽器中實(shí)現(xiàn)精準(zhǔn)的布局。你可以使用 flexbox 做向后兼容，創(chuàng)建一個(gè)沒有跨行的布局方案。雖然這樣不那么整潔，但也完全可以使用，而且不需要為數(shù)量在逐漸減少的那部分用戶來增加額外標(biāo)記。

你可以 點(diǎn)擊這來看相關(guān)示例。這是我發(fā)布在 Grid by Example 上的數(shù)個(gè)帶有向后兼容方案的模式之一。

如果把自己限制在過去，例如在舊的瀏覽器中只能使用 Grid 的部分功能，或使用那些自身受限的框架，那你就會(huì)失去使用 Grid 時(shí)產(chǎn)生創(chuàng)意的可能。既然這樣又何必使用 Grid？你也可以只使用舊的代碼方案，但這的確很可惜。

如果你在尋找柵格框架時(shí)找到本文，那你找對(duì)地方啦！學(xué)習(xí)并使用 CSS Grid 布局，可能你沒有必要再找除此之外的材料了。

原文地址：You do not need a CSS Grid based Grid System

原文作者：Rachel Andrew

歡迎大家在評(píng)論區(qū)留下你的想法和感受！

歡迎大家關(guān)注知乎專欄：全棧成長(zhǎng)之路

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

也歡迎大家加入學(xué)習(xí)交流QQ群：637481811

本文首發(fā)于我的 個(gè)人網(wǎng)站 LeviDing ，更多內(nèi)容歡迎關(guān)注我的個(gè)人網(wǎng)站。
歡迎掃描上方二維碼關(guān)注 公眾號(hào): LeviDing 訂閱實(shí)時(shí)動(dòng)態(tài)。