CSS3新增布局三劍客之Grid Layout

一、前言

??相比較Multi-Columns Layout 和Flexible Box Layout，Grid Layuot更像是兩者的結合，當然這里并不是說Grid Layout可以取代二者。

??另外Grid Layout與當前非常火熱的Flexible Box Layout有一個本質上的區別就是維度不一樣。在使用Flexible Box Layout時，我們只能通過flex-direction定義主軸沿著某一方向，而在Grid Layout中截然不同。

二、核心用法

??下面一步步去了解Grid Layout的核心用法：

1、宏觀角度

??宏觀上可以將Grid Layout看成由行和列組成，這一點可以類比HTML中的table標簽，接下來用Grid語法聲明一個3行3列的結構。

.grid {display: grid;width: 300px;height: 300px;margin: 0 auto;grid: repeat(3, 1fr) / repeat(3, 1fr);}.grid > div:nth-child(odd) {background-color: #f5f5f5;}.grid > div:nth-child(even) {background-color: #eee;} 復制代碼

??通過設置display屬性為grid或者inline-grid，可以使得該元素變成Grid布局容器，這基本是新增布局聲明的一個通用套路。

??上述grid屬性是一個復合屬性，等價下面的代碼。

.grid {/*grid: grid-template-rows / grid-template-columns*/grid-template-rows: repeat(3, 1fr);grid-template-columns: repeat(3, 1fr);} 復制代碼

??fr是Grid Layout中新增的單位，可以類比Flexible Box Layout中的flex-grow屬性。

??上述九宮格中的每一個小格子在Grid中有一個專門的術語 -- Grid Cell。

2、微觀角度

??從微觀的角度去看Grid Layout，首先你需要了解另一個術語 -- Grid Line。

??不知道讀者們有沒有看過制作豆腐的過程，其中有一個步驟是用線將整塊的豆腐割開，那條線和上述的Grid Line是一樣一樣的。

??那么我們前面所說的行與列就需要用一個更專業的術語來描述 -- Grid Track。

??Grid Track實際上就是相鄰的兩條Grid Line所形成的區域。

??在Grid Layout中是看不見Grid Line的，但是可以使用它，它默認是數字編號的形式，還記得上面的九宮格布局嗎？通過設置display和grid屬性，只是將容器劃分了結構，但是并沒有設置子元素的放置方式，幸好Grid Layout會為每一個子元素設置一個默認位置，例如第一行第一列的元素會這樣設置。

/* grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end */grid-area: 1 / 1 / 2 / 2; 復制代碼

??上述的數字就是Grid Line的編號，并且它還支持自定義命名。

.grid {position: relative;margin: 100px auto;width: 500px;height: 500px;display: grid;grid: [line-row-1]1fr[line-row-2]1fr[line-row-3]1fr[line-row-4] / [line-col-1]1fr[line-col-2]1fr[line-col-3]1fr[line-col-4];}.grid > div:nth-child(1) {grid-area: line-row-1 / line-col-1 / line-row-4 / line-col-3;} 復制代碼

3、Grid Area

??Grid Area也是一個比較重要的術語， 它主要由一個或者多個Grid Cell組成。前面的例子中，我們已經看到可以通過Grid Line為Grid Area分配空間，并且它還有另一種使用的方式。

.grid {position: relative;margin: 100px auto;width: 500px;height: 500px;display: grid;grid: "first first second" "first first fouth" "first first third";}.grid > div:nth-child(1) {grid-area: first;}.grid > div:nth-child(2) {grid-area: second;}.grid > div:nth-child(3) {grid-area: third;}.grid > div:nth-child(4) {grid-area: fouth;} 復制代碼

??同樣是上述的例子，我們可以這樣放置子元素，是不是特別的友好。

4、絕對定位在Grid Layout中的表現

??絕對定位大家應該很熟悉，其位置主要由包含塊或者初始化包含塊決定，通常我們都是通過設置父級元素的position屬性來確定包含塊，但是在Grid Layout中可以通過grid-area屬性達到同樣的效果。

.grid {position: relative;width: 400px;height: 400px;margin: 100px auto;display: grid;grid: repeat(2, 1fr) / repeat(2, 1fr);border: 1px dashed red;padding: 10px;}.demo1 {grid-area: 2 / 1 / 3 / 2;position: absolute;top: 30px;left: 30px;width: 100px;height: 100px;background: red;} 復制代碼

5、其它

??理解上面介紹的幾個術語和用法之后，基本上Grid Layout也沒有那么神秘了。另外，例如Grid item之間的間隙以及它們的排列方式，基本上和Flexible Box Layout大同小異。

??不過Grid Layout中還有很多好玩的知識點，例如margin凹陷的特性在Grid Layout中并不會發生。這些就留給讀者自己去探索吧。

三、最后

??為什么會起這個標題呢？主要是因為現在大部分的UI組件庫基本上都提供grid組件，就拿比較流行的Bootstrap組件庫來說，grid組件的實現：

• .row設置行，.col-*設置一個百分比寬度的列；
• .row通過負外邊距抵消容器的padding;
• .col通過左右內邊距實現元素之間的間隙效果；
• 通過媒體查詢設置斷點（breakpoints）實現響應式的布局；

??而CSS3新增的這個Grid Layout相比較這些實現方式，可以說是非常優秀了。相信不久我們可以告別Grid-Framework，只有一個CSS3的Grid Layout。

參考資料

• W3C Grid Layout
• 大漠老師的《使用CSS Grid的九大誤區》里面整理了很多參考資料
• 上述所有用例的代碼

總結

以上是生活随笔為你收集整理的愿只有一个Grid Layout的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。