CSS Grid布局這樣玩

自從去年年半年開始，CSS Grid布局的相關教程在互聯網上就鋪天蓋地，可謂是聲勢浩大。就針對于Web布局而言，個人認為Grid布局將是Web布局的神器，它改變了以往任何一種布局方式或者方法。不管以前的采用什么布局方法都可以說是一維的布局方式，而Grid最大的特色，采用了二維布局。@Rachel Andrew也一直致力于完善Grid的規范。

就我個人而言，我也一直在不斷的關注這個布局利器的相關更新，自從最初規范的出來，到目前規范的完善。在站上也不斷的在更新CSS Grid布局的使用。雖然這方向的教程已經很多了，但各有千秋，我追求以最簡單，最直接的方式來闡述它的使用方式方法。讓初學者能盡快的掌握其使用規則。

前段時間@Mirza Joldic在Medium上發布了 一篇文章 ，通過幾個Gif動態非常形象的闡述了CSS Grid的幾個核心概念以及使用方法，今天我就借花獻佛，用這幾張圖讓初學者快速掌握CSS Grid的核心概念和使用技巧。

Web布局的歷史演變

自從Web出來至今，Web的布局也經過了幾個演變，下圖可以一目了然：

有關于Web布局的演變史，去年也整理過一篇相關的文章簡單的闡述了這方面的故事，如果你感興趣的話，可以點擊這里進行了解。在Web的學習過程中，學習Web布局是一個不可避免的過程，而隨著前端技術的日新月異的變化，布局方式也在不斷的更新，早在2013年@Peter Gasston就對CSS布局的未來趨勢就做過預判斷，文章中就提供了CSS Grid的布局。如果今天來看，這種趨勢的預判是正確的，特別是今年3月份之后，各大主流瀏覽器都發布了對CSS Grid的支持。既然如此，學習CSS Grid相關的知識就很有必要。

既然掌握CSS Grid很有必要，那用什么樣的方式能最快的掌握CSS Grid相關的知識呢？這很重要。 特別是@Mirza Joldic在Medium上發布的文章，里面的動圖讓我耳目一新，通過簡單的幾張圖，就把CSS Grid的幾個核心介紹的非常清楚，我覺得很有必要拿出來與大家分享。

在繼續下面的內容之前，再次感謝@Mirza Joldic的付出。那咱們就不說廢話了，開始今天的學習之旅。

CSS Grid布局的介紹

學習CSS Grid布局更多的相關知識，我覺得通過一些工具會對大家的理解更有幫助，到目前為止，這方面的在線工具已經有很多種，比如：

• GRID GARDEN ：通過一個小游戲的方式，讓你快速掌握CSS Grid的相關知識，這個有點類似于 FLEXBOX FROGGY
• Griddy by @drewisthe
• CSS Grid Cheat Sheet by @alialaa

下面的動圖是使用@Mirza Joldic寫的 CSS Grid Playground 小工具。動圖來了：

這里要提兩個核心概念，這兩個核心概念有點類似于Flexbox布局：

• Grid容器（對應Flexbox布局中的Flex容器）
• Grid項目（對應Flexbox布局中的Flex項目）

比如一個這樣的HTML結構：

使用 CSS Grid布局首要的第一步，就是通過 display:grid; 來對容器聲明一個網格容器，那么這個 div 元素里面對應的子元素就自動成為網格項目。

雖然你在 div.grid-container 中設置了 display:grid; ，聲明了這個元素為Grid容器，但在瀏覽器中，并看不到有任何的變化。但在在幕后中，他們還是發生了變化， div.grid-container 是一個Grid容器，他的所有子元素就自動變成了網格項目。

接下來，使用 grid-template-columns: 1fr 1fr 1fr; 來定義三列網格：

從gif圖中就明顯的看出來，現在有點變化了，顏色塊變小了，但很難區分出有何變化，為了讓效果之間有更突出的差異，再給 .grid-container 中添加 grid-gap:5px ：

看到變化了吧，整個網格分了三個列，單元格之間有 5px 的間距，同時每列的列寬是整個寬度的三分之一，那是因為我們采用了 fr 單位，而且把整個網格分成了三列，每列的寬度是 1fr 。這里告訴我們三個知識點：

• grid-template-columns 用來把網格指定列的寬度
• grid-gap 用來指定列（或行）的間距
• fr 可以自動根據網格容器的寬度來計算列的寬度

現在我們把 grid-template-columns 的值改成： 1fr 2fr 1fr ，對應的效果就會變成：

現在第二列的寬度是第一列和最后一列的兩倍。這也再次證明 fr 單位的強大之處，使用它可以讓你很容易定義你的網格尺寸。

現在越來越接近我們想要的網格。但需求是不斷變化的，比如我們現在想讓頂部的第一行盡可能的寬，比如說跨整個網格列（比如我們網頁的頭部，或者說我們常見的導航）。如此一來，只需要在第一個網格上使用 grid-column: 1 / 4 ：

或許第一次接觸 1 / 4 會令你感到神秘，其實這個涉及到了CSS Grid中的重要概念之一，那就是網格線，其中第一個數字是列的起始網格線位置，第二個數字是線束網格線的位置。對于一個CSS Grid，可以通過 grid-template-columns 創建列網格線， grid-template-rows 創建行網格線。這種方式創建的是一種顯式的網格線。當然，除了這種方式，還可以創建隱式網格線。除此之外，還可以使用 grid-auto-rows 和 grid-auto-columns 可以創建一個隱式網格。這個隱式網格對應的網格線就被稱之為隱式網格線。下圖簡單的展示了示例中的網格線示意圖：

接下來，我們想要有一個 300px 的側邊欄高度，并且讓他的位置是垂直方向的 2 / 3 。我們可以使用 grid-row: 2 / 4 來實現，這個特性和 grid-column 非常的類似。這個時候，效果變成這樣：

其實CSS Grid看上去和表格非常的類似，在表格中我們有一個專業的術語，合并單元格。其實在CSS Grid布局中，我們同樣有一個類似的特性，那就是在 grid-column 或者 grid-row 中引入關鍵詞 span ，在關鍵詞 span 后面緊跟一個數值，就是表示合并單元格的數量，先來看下圖：

上面的示例中，我們使用到了 grid-column: 2 / span 1 和 grid-row: 2 / span 2 。其中 grid-column: 2 / span 1 表示從列網格線 2 開始，跨度是 1 個列網格線（其實就是合并一個列單元格）。而 grid-row: 2 / span 2 表示的是從行網格線 2 開始，跨度是兩個兩個線（其實就是合并兩個行單元格）。

接著我們來做頁腳，在做頁腳之前，我們先刪除兩個網格項目，因為不需要他們了。做頁腳和做頁頭非常的類似，繼續使用 grid-column: 1 / 4 即可：

通過上面的方式，我們可以輕易的控制網格，也能非常容易的實現一個Web面頁的布局，比如一個三列的布局。但我們在布局中經常還需要控制對齊方式，特別是在CSS Grid的布局當中，比如下面的示例中，我們第三列并未占滿整個高度，這個時候希望它能底部對齊。此時為了實現這樣的效果，需要使用到CSS中的對齊模塊特性，比如在這里，我們可以使用 align-self: end 來實現：

align-self 是CSS中的一個新模塊特性 Box Alignment 中的一個屬性。有關于這個模塊的的功能還是非常的實用。@Rachel Andrew整理了一份 Box Alignment Cheatsheet ，里面詳細介紹了Box Alignment的使用。簡單的來講，這個規范中有三個關鍵部分：

• Positional Alignment ：關鍵詞有 start 、 end 、 center
• Baseline Alignment ：關鍵詞有 baseline 、 first baseline 、 last baseline
• Distributed Alignment ：關鍵詞有 space-between 和 space-around

其實你要是對Flexbox熟悉的話，你或許感覺這個Box Alignment有點類似于Flexbox中的一些控制Flex項目對齊方式的屬性。事實是這樣的，如果你感興趣想深入的了解這方面的相關知識，建議你花點時間閱讀《 Web布局新系統：CSS Grid,Flexbox和Box Alignment 》一文。

如果你對上面的相關知識有所了解的話，你就可以很輕易的使用CSS Grid相關知識實現一個常用的Web頁面布局效果。比如下面這張圖，為了好完，我把主內容的容器設置了具體的寬度，并且通過Box Alignment屬性，讓這個區域水平垂直居中：

整個題外話，雖然實現 水平垂直居中的解決方案 已有很多種了，但Box Alignment模塊將是最佳方式。

如果你感興趣的話，你也可以通過@Mirza Joldic寫的 CSS Grid Playground 小工具去嘗試各式各樣的網格布局效果。從而加強對CSS Grid的概念。當然，在使用它去做一些事情或者做一些創意之前，還是很有必要對CSS Grid基礎要有一個簡單的了解。個人建議你花點時間閱讀一下下面幾篇文章：

• CSS Grid布局：圖解網格布局中術語之一
• CSS Grid布局：圖解網格布局中術語二
• CSS Grid布局：圖解網格布局中術語三
• CSS Grid布局指南

當然，如果你深入的學習CSS Grid的相關知識，個人強列你仔細閱讀完這里的所有文章。其實我個人也是CSS Grid的極度愛好者，我將在這里不斷的更新和發布有關于CSS Grid的相關文章。希望這些文章對你學習和使用CSS Grid有所幫助。

總結

這篇文章借助于@Mirza Joldic寫的 CSS Grid Playground 小工具以及 博文 中提供的動圖，快速幫助大家理解CSS Grid的核心概念，以及快速使用這些知識掌握CSS Grid相關知識，從而通過掌握的CSS Grid知識創建自己想要的Web布局效果。雖然CSS Grid已經很強大了，但為了能更好的滿足Web開發者的需求，它還在不斷的更新，不斷的提供和完善新特性，有關于這方面的變更，大家可以關注W3C規范的相關更新。當然也可以關注小站有關于CSS Grid相關更新。如果您有這方面的經驗，歡迎在下面的評論中與我們一起分享。

 

 

來自：http://www.w3cplus.com/css3/playing-with-css-grid-layout.html