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
.grid > div
:nth-child(odd)
.grid > div
:nth-child(even)
複製**
上述grid屬性是乙個復合屬性，等價下面的**。
.grid
複製**
上述九宮格中的每乙個小格仔在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
.grid > div
:nth-child(1)
複製**
3、grid area
grid area也是乙個比較重要的術語， 它主要由乙個或者多個grid cell組成。前面的例子中，我們已經看到可以通過grid line為grid area分配空間，並且它還有另一種使用的方式。
.grid
.grid > div
:nth-child(1)
.grid > div
:nth-child(2)
.grid > div
:nth-child(3)
.grid > div
:nth-child(4)
複製**
4、絕對定位在grid layout中的表現
絕對定位大家應該很熟悉，其位置主要由包含塊或者初始化包含塊決定，通常我們都是通過設定父級元素的position屬性來確定包含塊，但是在grid layout中可以通過grid-area屬性達到同樣的效果。
.grid
.demo1
複製**
5、其它
理解上面介紹的幾個術語和用法之後，基本上grid layout也沒有那麼神秘了。另外，例如grid item之間的間隙以及它們的排列方式，基本上和flexible box layout大同小異。
不過grid layout中還有很多好玩的知識點，例如margin凹陷的特性在grid layout中並不會發生。這些就留給讀者自己去探索吧。
為什麼會起這個標題呢？主要是因為現在大部分的ui元件庫基本上都提供grid元件，就拿比較流行的bootstrap元件庫來說，grid元件的實現：
而css3新增的這個grid layout相比較這些實現方式，可以說是非常優秀了。相信不久我們可以告別grid-framework，只有乙個css3的grid layout。
願只有乙個Grid Layout
css3新增布局三劍客之grid layout 相比較multi columns layout 和flexible box layout，grid layuot更像是兩者的結合，當然這裡並不是說grid layout可以取代二者。另外grid layout與當前非常火熱的flexible box l...
借我，許乙個願
情人節快樂，快樂或不快樂，他們說都是自己的感覺。我怎麼沒這種覺悟？回家的路上有個朋友陪我聊了一路，我說，我們是同一類人，呵呵。有一類人，彼此認識，卻怎麼也不熟悉，不能說太多，不能看太多，也不能了解太多。所以，最後我們只能做朋友，做再也簡單不過的朋友。有一類人，彼此熟悉，不用說太多，不用看太多，也不用...
借我，許乙個願
情人節快樂，快樂或不快樂，他們說都是自己的感覺。我怎麼沒這種覺悟？回家的路上有個朋友陪我聊了一路，我說，我們是同一類人，呵呵。有一類人，彼此認識，卻怎麼也不熟悉，不能說太多，不能看太多，也不能了解太多。所以，最後我們只能做朋友，做再也簡單不過的朋友。有一類人，彼此熟悉，不用說太多，不用看太多，也不用...