摘要：語(yǔ)法如下是簡(jiǎn)寫屬性，也可以分別定義行間隔和列間隔。語(yǔ)法如下屬性值得含義同這里不再過(guò)多說(shuō)明，讀者可以自行驗(yàn)證。

在上篇——JavaScript五十問(wèn)——對(duì)比來(lái)說(shuō)CSS的Grid與FlexBox（上篇），我介紹了Flex的屬性與使用，今天我們來(lái)總結(jié)一下Grid的具體使用方法，最后會(huì)結(jié)合Flex與Grid布局講一講二者的聯(lián)系與不同。

需要注意得是，Grid布局與我們之前所熟悉的css布局思路有很大的不同，閱讀這篇文章之前，需要把我們平時(shí)對(duì)css的刻板印象拋棄掉，準(zhǔn)備接受知識(shí)的洗禮吧，少年！

與 Flex 相同，Grid 也分為容器與元素兩個(gè)概念；在一個(gè) html 標(biāo)簽中添加樣式：display：grid或者display：inline-grid，即構(gòu)建了一個(gè) Grid 的容器，里面的 dom 元素即為 Grid 元素。同樣，Grid 也分為兩類屬性，分別裝載在容器與元素上，下面一一說(shuō)明。

以下所有例子均基于或擴(kuò)展于下面的HTML結(jié)構(gòu)：

 

    
1
    
2
    
3
    
4
    
5
  

Grid容器里面有網(wǎng)格一系列的概念；聽著唬人，但是結(jié)合圖很容易理解。

水平方向有垂直方向的線段即為網(wǎng)格線

兩個(gè)相鄰的平行網(wǎng)格線之間的區(qū)域就是網(wǎng)格軌道

四個(gè)相鄰邊組成的區(qū)域就是網(wǎng)格單元。

fr是Grid中特有表示尺寸的單位，是分?jǐn)?shù)——fraction的縮寫，假設(shè)我們現(xiàn)在有四個(gè)grid元素，每個(gè)元素的寬度都是1fr，那么每個(gè)元素的實(shí)際寬度就是總寬度的1/4。

fr也可以跟%，px 共同使用，他的計(jì)算規(guī)則就是刨去px與%的剩余空間作為fr分配空間，所有fr相加之和作為分母，分子為每個(gè)元素對(duì)應(yīng)的fr的值。（當(dāng)然，在Grid語(yǔ)境下，我們是不需要設(shè)置width屬性的，這樣說(shuō)是為了讓大家容易理解）。

這樣說(shuō)來(lái)好像fr僅僅是%的另外一種寫法，隨著我的介紹，你就會(huì)發(fā)現(xiàn)fr優(yōu)于%的地方。

接下來(lái)，我還是以腦圖為思路介紹Grid的各個(gè)屬性。

grid-tempalte是三個(gè)屬性的簡(jiǎn)寫，這三個(gè)屬性都是描述整塊區(qū)域即多個(gè)網(wǎng)格單元的屬性。

grid-template-rows是描述橫向的單元軌道屬性的。可以試想一下，我們?cè)谝粋€(gè)Grid容器中，關(guān)于這個(gè)屬性，我們關(guān)心的是什么呢？無(wú)非就是這個(gè)容器中有多少行，每行的高度；所以，這個(gè)屬性就是讓我們定義這些值得。先來(lái)看語(yǔ)法：
grid-template-rows: | ...;
這個(gè)屬性除了可以定義軌道尺寸和個(gè)數(shù)之外，還允許我們定義兩個(gè)軌道之間的網(wǎng)格線的名稱，至于他的作用，我們先按下不表，先來(lái)看這個(gè)屬性是怎樣定義每個(gè)軌道的尺寸和軌道個(gè)數(shù)的。
先來(lái)看一個(gè)例子：

.container{
    grid-template-rows:200px auto 1fr 1fr 20%;
    grid-row-gap:10px;//定義軌道之間的間距
}

grid-template-rows定義了五個(gè)值，表示Grid容器里面有五行，可以使用任意的定義尺寸的方式,效果如下

其中auto值就表示元素的實(shí)際占用大小。
Grid分配空間首先計(jì)算除了fr對(duì)應(yīng)軌道的尺寸，然后將剩余尺寸按照比例分配給fr加持的元素。
以上，我們?cè)贕rid容器里定義了五行容器軌道，當(dāng)我們定義軌道過(guò)多時(shí)，可以使用repeat函數(shù)來(lái)減少我們的工作量，語(yǔ)法為：
grid-template-rows:repeat(n, size)
例子：

.container{
    grid-template-rows:repeat(5,1fr);
    grid-row-gap:10px;
}

上面就定義了五個(gè)網(wǎng)格軌道，每個(gè)軌道的高度是Grid容器高度的1/5。

grid-template-columns 與 grid-template-rows使用方法是一致的，這兩個(gè)屬性共同作用于Grid容器，相當(dāng)于把Grid容器分割為m*n個(gè)子區(qū)域。
例子：

.container{
    grid-template-rows:repeat(3,1fr);
    grid-template-columns: repeat(2, 1fr)

上面這個(gè)例子就會(huì)得到六個(gè)均等分的子區(qū)域。

通過(guò)上面兩個(gè)屬性，相信大家對(duì)Grid布局有一個(gè)基本的認(rèn)識(shí)了，想必對(duì)Grid二維布局的模式也有一些概念了，接下來(lái)才是Grid精彩之處，震撼靈魂的地方！

上面兩個(gè)屬性分別設(shè)置Grid行屬性和列屬性，grid-template-areas是設(shè)置Grid區(qū)域的。所謂區(qū)域是由一個(gè)或多個(gè)行、列、單元組成的一篇區(qū)域。首先看一下語(yǔ)法：

.container {
  grid-template-areas: 
    " | . | none | ..."
    "...";
}

其中
grid-area-name表示網(wǎng)格區(qū)域的名稱
.表示空的網(wǎng)格區(qū)域
none 表示沒(méi)有定義網(wǎng)格區(qū)域
在我們平時(shí)開發(fā)時(shí)，經(jīng)常會(huì)出現(xiàn)上頭下尾中間兩欄布局的情況，下面我們使用grid-template-areas完成這樣的布局。

.container{
  display:grid;
  grid-template-rows:60px 1fr 60px;
  grid-template-columns:100px 1fr;
  grid-template-areas:
    "header header"
    "left right"
    "footer footer";
}

.container .item:first-child{
  grid-area: header;
}

.container .item:nth-child(2){
  grid-area: left;
}

.container .item:nth-child(3){
  grid-area: right;
}

.container .item:nth-child(4){
  grid-area: footer;
}
.container{
  display:grid;
  grid-template-rows:60px 1fr 60px;
  grid-template-columns:100px 1fr;
  grid-template-areas:
    "header header"
    "left right"
    "footer footer";
}

.container .item:first-child{
  grid-area: header;
}

.container .item:nth-child(2){
  grid-area: left;
}

.container .item:nth-child(3){
  grid-area: right;
}

.container .item:nth-child(4){
  grid-area: footer;
}



    
1
    
2
    
3
    
4

在Grid容器中，我們定義了6個(gè)網(wǎng)格單元，使用grid-tempalte-areas劃分了header footer left right 四片區(qū)域；而在grid元素中，每個(gè)元素使用grid-area來(lái)指定元素所對(duì)應(yīng)的grid區(qū)域。因此，我們雖然劃分了6個(gè)單元，但可以使用四個(gè)元素來(lái)表示。

是不是很神奇呢，更神奇的是，grid-area-name是支持中文定義的。

以上grid-template的子屬性就說(shuō)完了，grid-template是以上那三個(gè)屬性的簡(jiǎn)寫方式，語(yǔ)法如下：

grid-tempalte:<"grid-template-rows"> / <"grid-template-columns">`
`grid-tempalte:[ ?  ? ? ]+
               [ /  ]?

例如上面的例子可以這樣簡(jiǎn)寫

grid-template: 
    "header header" 60px
    "left right" 1fr
    "footer footer" 60px
    / 50px 1fr;

grid-gap用來(lái)描述Grid 區(qū)域之間間隙的尺寸大小。語(yǔ)法如下：

.container {
    grid-gap:  ;
}

grid-gap是簡(jiǎn)寫屬性，也可以分別定義grid行間隔和grid 列間隔。

.container{
    grid-row-gap:10px;
    grid-column-gap:10px;
}

grid-gap與margin與padding不同，它不占用當(dāng)前元素的盒模型的位置。

上圖顯示的很清楚，3號(hào)元素的margin 與 padding 均為零。

place-items 是 justify-items和align-items的簡(jiǎn)寫方式
這兩個(gè)屬性分別定義了Grid元素水平與垂直分布方式。
語(yǔ)法如下：

    justify-items: stretch | start | end | center;
    align-items: stretch | start | end | center;

對(duì)于這四個(gè)屬性，默認(rèn)stretch，相信讀者在熟悉了Flex布局后都不會(huì)陌生，這里不多做解釋，直接看例子，以align-items 為例：

.container{
  display:grid;
  grid-template: 
    "header header" 160px
    "footer footer" 160px
    / 160px 160px;
  
  height:500px;
  grid-row-gap:10px;
  grid-column-gap: 10px;
}

首先定義四個(gè)grid單元，每個(gè)單元的長(zhǎng)寬均為160px
接下來(lái)我們更改align-items的值

align-items:stretch

align-items:center

align-items:start

align-items: end

為了方便大家理解，我用紅框框出每個(gè)Grid單元所占用的空間。由此可以看出，place-items屬性是用來(lái)表明一個(gè)元素在當(dāng)前grid單元中的分布方式，這個(gè)元素的拉伸，居中等都是以grid單元作為參考的。

place-content同樣是一個(gè)簡(jiǎn)寫屬性，它包括：justify-content 和 align-content，它表示grid元素在grid容器中的分布方式，只有當(dāng)grid容器中有剩余空間的時(shí)候才起作用。
語(yǔ)法如下:

justify-content: stretch | start | end | center | space-between | space-around | space-evenly;
align-content: stretch | start | end | center | space-between | space-around | space-evenly;

屬性值得含義同F(xiàn)lex；這里不再過(guò)多說(shuō)明，讀者可以自行驗(yàn)證。

grid-auto-rows 和 grid-auto-columns；用于當(dāng)實(shí)際的Grid的元素多余劃分的Grid元素時(shí)，定義多余Grid元素的長(zhǎng)寬;
例如我們?cè)贖TML里面一定了五個(gè)Grid元素，但是在css中只定義了2*2的Grid單元，可以使用grid-auto來(lái)定義多出來(lái)的軌道的尺寸。

grid-auto-flow的用法需要結(jié)合下面的元素屬性來(lái)說(shuō)明。

兩個(gè)屬性是用來(lái)定義Grid元素列方向上的起始與終止位置。
語(yǔ)法格式為：

    grid-column-start:  |  | span  | span  | auto

其中：
number為起止第幾條網(wǎng)格線
name 為網(wǎng)格線的名稱
span 網(wǎng)格元素會(huì)跨越網(wǎng)格單元的數(shù)量
span 當(dāng)前的網(wǎng)格元素會(huì)在哪一個(gè)網(wǎng)格線上開始o(jì)r終止

注意 使用span 如果是start，表示這個(gè)從開始的位置跨過(guò)的grid單元，如果是end 表示這個(gè)元素覆蓋的grid單元。
grid-column是它們的簡(jiǎn)寫方式，語(yǔ)法為：

grid-column:grid-column-start / grid-column-end

grid-row屬性與grid-column用法一致，這里不過(guò)多贅言，直接看例子：

.container{
  display:grid;
  grid-template-rows:[rone]1fr[rtwo]3fr[rthree]1fr[rfour];
  grid-template-columns: [cone]1fr[ctwo]5fr[cthree]2fr[cfour];
  height:500px;
}

.item:first-child{
  grid-column-start:1;
  grid-column-end:cfour;
  grid-row-start:rone;
  grid-row-end: 2;
  
}

.item:nth-child(2){
  
  grid-column-start:1;
  grid-column-end:span 1;
  grid-row-start:rtwo;
  grid-row-end: span cthree;
}

.item:nth-child(3){
  
  grid-column-start: ctwo;
  grid-column-end:4;
  grid-row-start:rtwo;
  grid-row-end: span cthree;
} 



.item:nth-child(4){
  grid-column-start:1;
  grid-column-end:4;
  grid-row-start:3;
  grid-row-end: span 4;
} 

效果：

首先在Grid容器中劃分出9個(gè)grid單元，這九個(gè)單元被六個(gè)網(wǎng)格線所分割，并給這六個(gè)網(wǎng)格線命名。在四個(gè)Grid元素中定義橫行的起始位置。
grid-row 與 grid-column結(jié)合使用，可以起到與Grid-template-areas同樣的效果。

grid-area我們?cè)谇懊嬉呀?jīng)接觸過(guò)一部分了，他與Grid容器中的grid-template-areas一起定義，也是grid-column與grid-row的簡(jiǎn)寫屬性，語(yǔ)法為：

 grid-area:  |  /  /  / ;

name為grid區(qū)域的名稱，與grid-tempalte-areas結(jié)合使用。

上面我們的例子就可以用grid-area表示：

.item:first-child{
    grid-area:1/rone/2/cfour;
}

justify-self定義Grid元素的水平布局方式的，例如，我們?cè)贕rid容器中定義justify-items的屬性為默認(rèn)屬性，而在某一個(gè)Grid元素中定義justify-self為center，那么其他元素表現(xiàn)為拉伸，這個(gè)元素則多帶帶表現(xiàn)為居中。也就是說(shuō)，justify-self在Grid容器中對(duì)應(yīng)的屬性是justify-items。
語(yǔ)法為：

.item {
    justify-self: stretch | start | end | center;
}

align-self與justify-self一致，改變的是這個(gè)元素的垂直部署方式，與容器中align-items對(duì)應(yīng)，
語(yǔ)法為：

.container {
    align-self: stretch | start | end | center;
}

由于這四個(gè)屬性值已經(jīng)在我們的系列文章中出現(xiàn)多次，這里不再多說(shuō)。

plac-self是以上兩個(gè)屬性的簡(jiǎn)寫方式，語(yǔ)法為：

.container {
    place-items:  / ;
}

Grid的所有屬性已經(jīng)介紹完畢了，在對(duì)Grid宇宙有了一個(gè)基本的認(rèn)識(shí)后，我們?cè)倩仡^看一下Grid宇宙中出現(xiàn)的新尺寸單位——fr。
可能大家在剛剛結(jié)仇到fr這個(gè)單位時(shí)，都會(huì)認(rèn)為它是%的一個(gè)別名；但是，我們來(lái)看最下面的例子：
我們?cè)贕rid容器中劃分出四個(gè)Grid區(qū)域，并定義每個(gè)區(qū)域的寬度為25%，并定義每個(gè)Grid元素之間的gap寬70px；

.container{
  display:grid;
  grid-template-columns: repeat(4, 25%);
  grid-column-gap: 70px;
}

效果如下：

很明顯，這里元素溢出了。這種情況是我們不想看到的。
下面，我們將25%替換為1fr看一下效果：

效果對(duì)比很明顯。
而造成兩者顯著區(qū)別的原因是二者的計(jì)算空間方式的不同。使用百分比它的分母是父元素的width或者h(yuǎn)eight，而fr的分母是父元素中剩余空間的尺寸；css會(huì)首先計(jì)算使用%和px定義的元素尺寸，剩下的空間再由fr元素進(jìn)行比例分配。這就是使用fr不會(huì)出現(xiàn)元素溢出的情況。當(dāng)然我們也可以使用calc避免溢出的尷尬，但是兩種解決方案孰優(yōu)孰略已經(jīng)一目了然了。

Flex布局與Grid布局有很多相似的地方，例如justify-content和justify-items的用法。但是更多的是不同，最重要的是Grid開拓了二維布局的方式，相比于傳統(tǒng)的css布局方式（Flex、bootstrp 12列），Grid開創(chuàng)了網(wǎng)格的概念，用戶可以從橫縱兩個(gè)方面部署元素。正是因?yàn)槿绱耍贕rid宇宙中，傳統(tǒng)的css布局、尺寸屬性就顯得格格不入了。而Grid布局的二維特性所帶來(lái)的整體觀，使Grid在頁(yè)面級(jí)別樣式上更加游刃有余。而Flex相比于Grid 更加適合小組件上的樣式開發(fā)，二者并不沖突相信在Grid 與 Flex雙雙加持之下，一定會(huì)收獲更好的開發(fā)效果！
Grid布局還是一個(gè)較新潮的概念，我也是一般看資料學(xué)習(xí)，一邊分享，由于缺少實(shí)際的開發(fā)經(jīng)驗(yàn)，對(duì)于很多屬性的應(yīng)用場(chǎng)景還沒(méi)有很深入的理解，故而有的屬性一筆帶過(guò)；如果我有理解不正確的地方，歡迎大家指正！

MDN:Grid Layout
張?chǎng)涡瘢簩懡o自己看的display: grid布局教程
知乎：CSS 新的長(zhǎng)度單位 fr 你知道么？

JavaScript五十問(wèn)——對(duì)比來(lái)說(shuō)CSS的Grid與FlexBox（上篇）