邁向 Grid 二維佈局時代

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"CSS Grid 佈局是一種強大並且富有創意的的佈局方案,這篇文章專門爲不瞭解 Grid 的 web 開發人員來介紹它,我將從以下幾個方面來介紹它"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"numberedlist","attrs":{"start":null,"normalizeStart":1},"content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":1,"align":null,"origin":null},"content":[{"type":"text","text":"爲什麼需要 Grid。Grid Line 在生產環境中怎麼安全的使用 Grid"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":2,"align":null,"origin":null},"content":[{"type":"text","text":"介紹 Gird 基本概念。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":3,"align":null,"origin":null},"content":[{"type":"text","text":"開始學習使用 Gird。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":4,"align":null,"origin":null},"content":[{"type":"text","text":"在生產環境中怎麼安全的使用 Grid。"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":5,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"爲什麼需要 Grid"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"目前我們有很多種佈局方案,比如最初我們使用表格佈局,後面使用 float, position 和 inline-block 來進行佈局, 由於這些方法在設計之初上並不是用於佈局的,而是用於圖文展示,由此 CSS 當初設計的不是很完美,並且遺漏了許多功能,比如說無法很方便的實現垂直居中; 無法顯式的去創建 BFC,只能通過一些 hack 手段去處理,比如 overflow: hidden, 或者使用 clear:both 去清除浮動帶來的副作用。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"2009 年,W3C 提出了一種新的方案 ----"},{"type":"codeinline","content":[{"type":"text","text":"Flexbox"}]},{"type":"text","text":" 佈局, Flex 佈局是軸線佈局,只能指定 \"項目\" 針對軸線的位置,可以看作是一維佈局,但是對於複雜的二維佈局就有心無力了。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Grid 佈局是 CSS 誕生以來第一個專門爲解決佈局問題而生的方案, 它將容器劃分成 \"行\" 和 \"列\",產生單元格,然後指定 \"項目所在\" 的單元格,可以看作是二維佈局。"},{"type":"codeinline","content":[{"type":"text","text":"Grid"}]},{"type":"text","text":" 佈局與 "},{"type":"codeinline","content":[{"type":"text","text":"Flex"}]},{"type":"text","text":" 佈局有一定的相似性,都可以指定容器內部多個項目的位置。但是,它們也存在重大區別,"},{"type":"codeinline","content":[{"type":"text","text":"Grid"}]},{"type":"text","text":" 主要是用於佈局的,而 "},{"type":"codeinline","content":[{"type":"text","text":"Flex"}]},{"type":"text","text":" 是主要用於內容的,兩種方案並不是水火不容的,而是相輔相成的。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"另外值得一提的一點是在柵格系統方案,我們也遇見過很多的 CSS 框架,例如 "},{"type":"codeinline","content":[{"type":"text","text":"Bootstrap"}]},{"type":"text","text":" 和 "},{"type":"codeinline","content":[{"type":"text","text":"Foundation"}]},{"type":"text","text":", 它們都提供了很優秀的 "},{"type":"codeinline","content":[{"type":"text","text":"grid layout"}]},{"type":"text","text":" 模板,但是它們本質上並不是 "},{"type":"codeinline","content":[{"type":"text","text":"grid"}]},{"type":"text","text":",而是通過 "},{"type":"codeinline","content":[{"type":"text","text":"float"}]},{"type":"text","text":" 來實現,"},{"type":"codeinline","content":[{"type":"text","text":"CSS grid"}]},{"type":"text","text":" 而跟他們是完全不同的。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"web 網頁的佈局基礎是最初是基於 "},{"type":"codeinline","content":[{"type":"text","text":"float"}]},{"type":"text","text":" 的,這導致了佈局的模型是一維的,所以當我們去進行設計佈局的時候都是從行去考慮方案的。下面是一個簡單兩列布局的實例,雖然看起來圖片 B 下方似乎有一個列,但是實際上沒有,我們都是通過行去進行佈局操作的。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/46\/462aaab282aa54500ef13c2f0a26cfbc.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"相比之下 "},{"type":"codeinline","content":[{"type":"text","text":"CSS Gird"}]},{"type":"text","text":" 佈局,我們會通過以下圖片所展示的方式來進行思考。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/1a\/1acc25344c931ca6fde73f38a587de4a.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在圖中我們有 "},{"type":"codeinline","content":[{"type":"text","text":"二維繫統"}]},{"type":"text","text":", 不單單隻有行,其實還有列,這是一個全新的思考方式,類似於出現 "},{"type":"codeinline","content":[{"type":"text","text":"React\/Vue Hook"}]},{"type":"text","text":" 時候需要調整思考問題的方式, 接下來我會帶你去理解它。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"介紹 Gird 基本概念。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在深入瞭解 Grid 的概念之前,重要的是瞭解術語,由於此處涉及的術語在概念上有點相似,因此,如果你不理解它們所代表的含義,就很容易將它們混淆。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"Grid Container"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在元素上設置 "},{"type":"codeinline","content":[{"type":"text","text":"display: grid"}]},{"type":"text","text":", 能夠使它成爲一個 "},{"type":"codeinline","content":[{"type":"text","text":"Grid Container"}]},{"type":"text","text":",它的直接子元素都將成爲 "},{"type":"codeinline","content":[{"type":"text","text":"grid Item"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章