資訊專欄INFORMATION COLUMN
摘要：在過去的幾個星期里，我開始看到基于的布局框架和柵格系統的出現。你可能傾向于明確給出所有元素的位置，或是盡可能依賴于自動布局。
在過去的幾個星期里，我開始看到基于 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 訂閱實時動態。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112375.html
摘要：在過去的幾個星期里，我開始看到基于的布局框架和柵格系統的出現。你可能傾向于明確給出所有元素的位置，或是盡可能依賴于自動布局。 showImg(https://segmentfault.com/img/remote/1460000010188997); 在過去的幾個星期里，我開始看到基于 CSS Grid 的布局框架和柵格系統的出現。我們驚訝它為什么出現的這么晚。但除了使用 CSS Gr...
摘要：下面，本文將介紹幾個比較有代表性的柵格樣式庫，講述它們的簡要原理和用法正確的打開方式。雖然柵格樣式庫很棒，但它們并不是響應式設計的全部。但在這個過程中，理解各類柵格樣式庫的工作原理，正確使用它們，才能做出穩定可靠的頁面結構。 說到柵格系統（grid system），你也許見過這樣的概念： showImg(https://segmentfault.com/img/bVmQnO); 像這樣...
摘要：柵格系統中的列是通過指定到的值來表示其跨越的范圍。實例下圖是一個柵格系統，共有四行。然后在根目錄中，使用命令，可以自動將源代碼編譯成，放在目錄中。 什么是Bootstrap Bootstrap是一個用于快速開發Web應用程序和網站的前端框架，它包括HTML,CSS,JS等。它是由Twitter開發，現在成為Github上最為流行的前端開發框架。它提供了一套響應式，移動設備優先的流式柵格...
閱讀 807·2021-11-22 15:25
閱讀 1408·2021-09-08 09:45
閱讀 1684·2021-09-02 09:46
閱讀 1299·2019-08-30 15:56
閱讀 1527·2019-08-29 15:14
閱讀 1159·2019-08-29 13:06
閱讀 2009·2019-08-29 12:34
閱讀 1399·2019-08-26 12:14
