CSS網(wǎng)格布局完整指南

簡介

CSS Grid布局（又名"網(wǎng)格"）院崇，是一個基于二維網(wǎng)格布局的系統(tǒng)拉讯，旨在改變我們基于網(wǎng)格設(shè)計的用戶界面方式竿拆。正如我們所知机隙，CSS 總是用于布局我們的網(wǎng)頁，但它并沒有做的很好萨西。剛開始的時候我們使用表格(table)有鹿，然后使用浮動(float)、定位(position)和內(nèi)聯(lián)塊(inline-block)谎脯，但所有這些方法本質(zhì)上來講都是hacks葱跋，并留下了很多需要實現(xiàn)的重要功能問題（例如垂直居中），雖然Flexbox可以起到一定的補救作用源梭，但是旨在用于更簡單的一維布局娱俺，并不適用于復(fù)雜的二維布局(實際上 Flexbox 和 Grid 可以一起結(jié)合使用起到最佳效果)。網(wǎng)格（Grid）是第一個專門為解決布局問題而創(chuàng)建的CSS模塊废麻，用來解決我們之前在制作網(wǎng)站時使用hacks處理布局問題荠卷。
這里有兩件事情啟發(fā)我創(chuàng)建本指南。第一個是 Rachel Andrew 的令人敬畏的書--為 CSS Grid 布局做好準備烛愧。這本書很詳盡明確的的介紹了Grid油宜，是整篇文章的基礎(chǔ)。我強烈鼓勵你買它怜姿，讀它慎冤。另外一個很大的靈感來自于 Chris Coyier 的-- Flexbox完整指南，這本書是我了解Flebox的一個很優(yōu)秀的資源沧卢。它幫助了很多人蚁堤，這是事實，這里但狭，我還想補充一句披诗，當你使用谷歌搜索"flexbox"時，會出現(xiàn)很多類似的資源立磁，但是為什么不直接利用最好的資源呢呈队？
我書寫此指南的目的是基于目前最新規(guī)范的版本，規(guī)范其網(wǎng)格概念息罗。所以我不會再次提及過時的 IE 語法掂咒，并且隨著規(guī)范的成熟，我會盡我們所能定期更新此指南迈喉。

基礎(chǔ)知識與瀏覽器支持

Grid 的入門是很容易的绍刮。你只需要定義一個容器元素并設(shè)置display：grid，使用grid-template-columns和 grid-template-rows屬性設(shè)置網(wǎng)格的列與行的大小挨摸，然后使用grid-column和 grid-row屬性將其子元素放入網(wǎng)格之中孩革。與flexbox類似，網(wǎng)格項的源順序并不重要得运。你的CSS可以按任何順序放置膝蜈，這使得你很容易重新布局網(wǎng)格與媒體查詢锅移。想象一下你定義的整個頁面布局，然后如果想要完全重新布局以適應(yīng)不同的屏幕寬度饱搏，這時僅僅使用幾行 CSS 代碼就可以實現(xiàn)非剃。Grid是有史以來最強大 CSS 模塊之一。
關(guān)于 Grid 一件很重要的事情就是它現(xiàn)在還不適用于項目使用推沸。目前還處于 W3C 的工作草案之中备绽，并且默認情況下，還不被所有的瀏覽器正確支持鬓催。Internet Explorer 10 和 11 已經(jīng)可以實現(xiàn)支持肺素，但也是利用一種過時的語法實現(xiàn)的。現(xiàn)在出于示例演示宇驾，我建議你使用啟用了特殊標志的 Chrome, Opera 或者 Firefox 倍靡。在 Chrome，導(dǎo)航到chrome://flags并啟用" web 實驗平臺功能"课舍。該方法同樣適用于 Opera (opera://flags)塌西。在Firefox中，啟用 layout.css.grid.enabled標志布卡。
這里有一張瀏覽器支持情況的表格(之后我會繼續(xù)更新):

CSS Grid Layout

除了Microsoft雨让，瀏覽器廠商似乎想要等到Grid規(guī)范完全成熟后再加以推廣。這是一件好事忿等，因為這意味著我們就不需要擔心學(xué)習(xí)多個語法。
這只是時間問題崔挖，你可以在生產(chǎn)環(huán)境中使用Grid贸街。但是現(xiàn)在你需要開始學(xué)習(xí)它了。

重要術(shù)語

在深入研究網(wǎng)格的概念之前狸相，我們需要理解其相關(guān)術(shù)語概念薛匪。因為這里所涉及的術(shù)語在概念上都有點類似，如果你不首先記住Grid規(guī)范定義脓鹃，你就會很容易將其與其他概念相混淆逸尖。但是不需要擔心，這里的屬性并沒有很多瘸右。

網(wǎng)格容器（Grid Container）

當一個元素的屬性設(shè)置為display：grid時娇跟，它是所有網(wǎng)格項（Grid Items）的直接父元素。在下面示例中container就是網(wǎng)格容器太颤。
HTML:

<div class="container">
  <div class="item item-1"></div>
  <div class="item item-2"></div>
  <div class="item item-3"></div>
</div>

網(wǎng)格項（Grid Item）

網(wǎng)格容器的子節(jié)點(例如直接后代)苞俘。這里 item元素都是網(wǎng)格項，但是sub-item不包含其中龄章。
HTML:

<div class="container">
  <div class="item"></div> 
  <div class="item">
    <p class="sub-item"></p>
  </div>
  <div class="item"></div>
</div>

網(wǎng)格線（Gird Line）

分界線構(gòu)成了網(wǎng)格的結(jié)構(gòu)吃谣。它們可以是垂直的("列網(wǎng)格線")也可以是水平的("行網(wǎng)格線")乞封，并且位于一行或一列的任一側(cè)。下面圖片中的黃線就是列網(wǎng)格線的示例岗憋。

列網(wǎng)格線

網(wǎng)格軌道（Grid Track）

兩個相鄰網(wǎng)格線之間的空間肃晚。你可以把它們想象成網(wǎng)格的列或行。下圖所示的是第二行和第三行網(wǎng)格線之間的網(wǎng)格軌道仔戈。

網(wǎng)格軌道

網(wǎng)格單元格（Grid Cell）

兩個相鄰的行和兩個相鄰的列之間的網(wǎng)格線空間关串。它是網(wǎng)格的一個"單位"。下面圖片所示的是行網(wǎng)格線line 1
和line 2與列網(wǎng)格線line 2和 line 3之間的網(wǎng)格單元格杂穷。

網(wǎng)格軌道

網(wǎng)格區(qū)域（Grid Area）

網(wǎng)格區(qū)域為四條網(wǎng)格線所包圍的總空間悍缠。網(wǎng)格區(qū)域可以由任何數(shù)量的網(wǎng)格單元組成。下面圖片所示的是行網(wǎng)格線line 1耐量，line3和列網(wǎng)格線line 1飞蚓，line 3之間的網(wǎng)格區(qū)域。

網(wǎng)格區(qū)域

網(wǎng)格屬性目錄（Grid Properties Table of Contents）

網(wǎng)格容器屬性	網(wǎng)格項目屬性
display	grid-column-start
grid-template-columns	grid-column-end
grid-template-rows	grid-row-start
grid-template-areas	grid-row-end
grid-column-gap	grid-column
grid-row-gap	grid-row
grid-gap	grid-area
justify-items	justify-self
align-items	align-self
justify-content
align-content
grid-auto-columns
grid-auto-rows
grid-auto-flow
grid

網(wǎng)格容器的屬性（Properties for the Grid Container）

display

將元素定義為網(wǎng)格容器廊蜒，并為其內(nèi)容建立新的網(wǎng)格格式上下文趴拧。
屬性值:
grid : 聲明一個塊級的網(wǎng)格
inline-grid : 聲明一個內(nèi)聯(lián)級的網(wǎng)格
subgrid：如果你的網(wǎng)格容器本身是一個網(wǎng)格項（即嵌套網(wǎng)格），你可以使用此屬性來表示你希望其行/列的大小從其父項繼承山叮，而不是自定義屬性著榴。

.container{
   display: grid | inline-grid | subgrid;
}

注：column, float, clear, 和 vertical-align 元素對網(wǎng)格容器不起作用业崖。

grid-template-columns 和 grid-template-rows

使用以空格分隔的值定義網(wǎng)格的列和行拟杉。這些值的大小表示軌道大小，它們之間的空間表示網(wǎng)格線泞边。
屬性值:
<track-size> ：可以是一個長度锐借、百分比或者是網(wǎng)格中自由空間的一小部分(使用fr單位)
<line-name> ：你選擇的任意名稱

.container{
    grid-template-columns: <track-size> ... | <line-name> <track-size> ...;
    grid-template-rows: <track-size> ... | <line-name> <track-size> ...;
}

示例：
當你在軌道值之間留有空格時问麸，網(wǎng)絡(luò)線就會自動分配數(shù)值名稱:

.container{
    grid-template-columns: 40px 50px auto 50px 40px;
    grid-template-rows: 25% 100px auto;
}

grid-numbers

但是你也可以顯示命名，請參考括號語法中的行名稱命名方式:

.container{
    grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
    grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

grid-names

請注意钞翔，一條網(wǎng)格線可以具有有多個名稱严卖。例如，這里的第二行將有兩個名字: row1-end和 row2-start:

.container{
  grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
}

如果你的定義中包含重復(fù)的部分布轿，你可以使用 repeat()標識進行精簡:

.container{
  grid-template-columns: repeat(3, 20px [col-start]) 5%;
}

等同于：

.container{
  grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start] 5%;
}

fr單位允許你將軌道的大小設(shè)置為網(wǎng)格容器的可用空間的一小部分哮笆。例如，如下所示把每個項目設(shè)置為網(wǎng)格容器寬度的三分之一：

.container{
  grid-template-columns: 1fr 1fr 1fr;
}

這里可用空間表示除去非彈性項后剩余的空間汰扭。在此示例中的fr單位的可用空間表示減去50px以后的空間大小:

.container{
  grid-template-columns: 1fr 50px 1fr 1fr;
}

grid-template-areas

通過使用grid-area屬性來定義網(wǎng)格區(qū)域名稱稠肘，從而定義網(wǎng)格模板。網(wǎng)格區(qū)域重復(fù)的名稱就會導(dǎo)致內(nèi)容跨越這些單元格东且。句點表示一個空單元格启具。語法本身提供了一種可視化的網(wǎng)格結(jié)構(gòu)。
屬性值:
<grid-area-name> -：使用grid-area屬性定義網(wǎng)格區(qū)域名稱
. ：句點表示一個空的單元格
none - 表示無網(wǎng)格區(qū)域被定義

.container{
  grid-template-areas: "<grid-area-name> | . | none | ..."
                       "..."
}

示例：

.item-a{
  grid-area: header;
}
.item-b{
  grid-area: main;
}
.item-c{
  grid-area: sidebar;
}
.item-d{
  grid-area: footer;
}
.container{
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas: "header header header header"
                       "main main . sidebar"
                       "footer footer footer footer"
}

這將創(chuàng)建一個四列三行的網(wǎng)格珊泳。最上面的一行為header區(qū)域鲁冯。中間一行由兩個main區(qū)域拷沸，一個空單元格和一個sidebar區(qū)域。最后一行是footer區(qū)域薯演。

grid-template-areas

你所聲明的每一行都需要具有相同數(shù)目的單元格撞芍。
你可以使用任意數(shù)量的句點(.)聲明單個空單元格。只要句點之間沒有空格它們就表示一個空單元格跨扮。
注意序无，你只是使用此語法進行網(wǎng)格區(qū)域命名，而不是網(wǎng)格線命名衡创。當你使用此語法時帝嗡，區(qū)域兩邊的線就會得到自動命名。如果網(wǎng)格區(qū)域名稱為foo,則其行線和列線的名稱就將為foo-start璃氢，最后一行線及其最后一列線的名字就會為foo-end哟玷。這意味著一些線就可能具有多個名稱，如上面示例中所示一也，擁有三個名稱:header-start,main-start, 以及footer-start巢寡。

grid-column-gap 和 grid-row-gap

指定網(wǎng)格線的大小。你可以把它想像成在行/列之間設(shè)置間距寬度椰苟。
屬性值:
<line-size> : 一個長度值

.container{
  grid-column-gap: <line-size>;
  grid-row-gap: <line-size>;
}

示例：

.container{
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px;   
  grid-column-gap: 10px;
  grid-row-gap: 15px;
}

grid-column-row-gap

間距僅僅在列/行之間產(chǎn)生抑月，而不會在邊緣區(qū)。

grid-gap

grid-column-gap和grid-row-gap的簡寫值舆蝴。
屬性值:
<grid-column-gap> 和<grid-row-gap> : 長度值

.container{
  grid-gap: <grid-column-gap> <grid-row-gap>;
}

示例：

.container{
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px;   
  grid-gap: 10px 15px;
}

如果沒有指定grid-row-gap屬性的值谦絮，默認與grid-column-gap屬性值相同

justify-items

沿著列軸對齊網(wǎng)格項中的內(nèi)容(相反于align-items屬性定義的沿行軸對齊)。此值適用于容器內(nèi)所有的網(wǎng)格項洁仗。
屬性值:
start : 內(nèi)容在網(wǎng)格區(qū)域中左端對齊
end ：內(nèi)容在網(wǎng)格區(qū)域中右端對齊
center ：內(nèi)容在網(wǎng)格區(qū)域居中對齊
stretch ：內(nèi)容寬度占滿整個網(wǎng)格區(qū)域（默認值）

.container{
  justify-items: start | end | center | stretch;
}

示例：

.container{
  justify-items: start;
}

grid-justify-items-start

.container{
  justify-items: end;
}

grid-justify-items-end

.container{
  justify-items: center;
}

grid-justify-items-center

.container{
  justify-items: stretch;
}

grid-justify-items-stretch

以上特性也可以使用justify-self屬性對各個網(wǎng)格項進行設(shè)置挨稿。

align-items

沿行軸對齊網(wǎng)格項中的內(nèi)容(相反于justify-items屬性定義的沿列軸對齊)。此值適用于容器內(nèi)所有的網(wǎng)格項京痢。
屬性值:
start : 內(nèi)容在網(wǎng)格區(qū)域中頂端對齊
end ：內(nèi)容在網(wǎng)格區(qū)域中底部對齊
center ：內(nèi)容在網(wǎng)格區(qū)域居中對齊
stretch ：內(nèi)容寬度占滿整個網(wǎng)格區(qū)域（默認值）

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

示例：

.container{
  align-items: start;
}

grid-align-items-start

.container{
  align-items: end;
}

grid-align-items-end

.container{
  align-items: center;
}

grid-align-items-center

.container{
  align-items: stretch;
}

grid-align-items-stretch

以上特性也可以使用align-self屬性對各個網(wǎng)格項進行設(shè)置。

justify-content

如果你的網(wǎng)格項目都是使用像px這樣的非響應(yīng)式單位來計算的篷店，就有可能出現(xiàn)一種情況－－網(wǎng)格的總大小可能小于其網(wǎng)格容器的大小祭椰。在這種情況下，您可以設(shè)置網(wǎng)格容器內(nèi)的網(wǎng)格的對齊方式疲陕。此屬性沿著列軸對齊網(wǎng)格（相反于align-content屬性定義的沿行軸對齊）方淤。
屬性值:
start -網(wǎng)格在網(wǎng)格容器中左端對齊
end - 網(wǎng)格在網(wǎng)格容器中右端對齊
center - 網(wǎng)格在網(wǎng)格容器中居中對齊
stretch - 調(diào)整網(wǎng)格項的大小，使其寬度填充整個網(wǎng)格容器
space-around -在網(wǎng)格項之間設(shè)置偶數(shù)個空格間隙蹄殃，其最邊緣間隙大小為中間空格間隙大小的一半
space-between - 在網(wǎng)格項之間設(shè)置偶數(shù)個空格間隙携茂，其最邊緣沒有間隙
space-evenly - 在網(wǎng)格項之間設(shè)置偶數(shù)個空格間隙，其最邊緣間隙與其相同

.container{
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;    
}

.container{
  justify-content: start;   
}

grid-justify-content-start

.container{
  justify-content: end; 
}

![Uploading grid-justify-content-center]
](http://upload-images.jianshu.io/upload_images/1673685-51053776bcc7111a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

.container{
  justify-content: center;  
}

grid-justify-content-center

.container{
  justify-content: stretch; 
}

grid-justify-content-stretch

.container{
  justify-content: space-around;    
}

grid-justify-content-space-around

.container{
  justify-content: space-between;   
}

grid-justify-content-space-between

.container{
  justify-content: space-evenly;    
}

grid-justify-content-space-evenly

align-content

如果你的網(wǎng)格項目都是使用像px這樣的非響應(yīng)式單位來計算的诅岩，就有可能出現(xiàn)一種情況－－網(wǎng)格的總大小可能小于其網(wǎng)格容器的大小讳苦。在這種情況下带膜，您可以設(shè)置網(wǎng)格容器內(nèi)的網(wǎng)格的對齊方式。此屬性沿著行軸對齊網(wǎng)格（相反于justify-content屬性定義的沿列軸對齊）鸳谜。
屬性值:
start -網(wǎng)格在網(wǎng)格容器中頂端對齊
end - 網(wǎng)格在網(wǎng)格容器中底端對齊
center - 網(wǎng)格在網(wǎng)格容器中居中對齊
stretch - 調(diào)整網(wǎng)格項的大小膝藕，使其寬度填充整個網(wǎng)格容器
space-around -在網(wǎng)格項之間設(shè)置偶數(shù)個空格間隙，其最邊緣間隙大小為中間空格間隙大小的一半
space-between - 在網(wǎng)格項之間設(shè)置偶數(shù)個空格間隙咐扭，其最邊緣沒有間隙
space-evenly - 在網(wǎng)格項之間設(shè)置偶數(shù)個空格間隙芭挽，其最邊緣間隙與其相同

.container{
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
}

示例：

.container{
  align-content: start; 
}

grid-align-content-start

.container{
  align-content: end;   
}

grid-align-content-end

.container{
  align-content: center;    
}

grid-align-content-center

.container{
  align-content: stretch;   
}

grid-align-content-stretch

.container{
  align-content: space-around;  
}

grid-align-content-space-around

.container{
  align-content: space-between; 
}

grid-align-content-space-between

.container{
  align-content: space-evenly;  
}

grid-align-content-space-evenly

grid-auto-columns和 grid-auto-rows

指定任何自動生成的網(wǎng)格軌道（也稱為隱式網(wǎng)格軌道）的大小。當顯式定位超出定義網(wǎng)格范圍的行或列（通過grid-template-rows / grid-template-columns）時蝗肪，將創(chuàng)建隱式網(wǎng)格軌道袜爪。
屬性值：
<track-size> ：可以是一個長度、百分比或者是網(wǎng)格中自由空間的一小部分(使用fr單位)

.container{
  grid-auto-columns: <track-size> ...;
  grid-auto-rows: <track-size> ...;
}

為了說明隱式網(wǎng)格軌道是如何創(chuàng)建的薛闪，請思考一下：

.container{
  grid-template-columns: 60px 60px;
  grid-template-rows: 90px 90px
}

grid-auto

這里創(chuàng)建了2x2的網(wǎng)格辛馆。
但現(xiàn)在試想一下你使用grid-column和grid-row來定位你的網(wǎng)格項如下：

.item-a{
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
.item-b{
  grid-column: 5 / 6;
  grid-row: 2 / 3;
}

implicit-tracks

我們告訴.item-b在第列線 5開始，在列線6結(jié)束逛绵，但是我們從未定義過列線 5或6怀各。因為我們引用了不存在的列，所以創(chuàng)建寬度為0的隱式軌道來填充這個間隙术浪。我們可以使用grid-auto-columns和grid-auto-rows來指定這些隱式軌道的寬度：

.container{
  grid-auto-columns: 60px;
}

implicit-tracks-with-widths

grid-auto-flow

如果您有未明確放置在網(wǎng)格上的網(wǎng)格項瓢对，則自動布局算法會啟動，以自動放置項胰苏。此屬性用來控制自動布局算法的工作原理硕蛹。
屬性值:
row : 告訴自動布局算法依次填充每一行，并根據(jù)需要添加新行
column ：告訴自動布局算法依次填充每一列硕并，并根據(jù)需要添加新列
dense ：告訴自動布局算法嘗試在網(wǎng)格更早的時候填充接下來出現(xiàn)較小的項目留有的空白

.container{
  grid-auto-flow: row | column | row dense | column dense
}

請注意法焰，dense可能會導(dǎo)致您的項目無序顯示。
示例：
思考下面的HTML：

<section class="container">
    <div class="item-a">item-a</div>
    <div class="item-b">item-b</div>
    <div class="item-c">item-c</div>
    <div class="item-d">item-d</div>
    <div class="item-e">item-e</div>
</section>

這里定義了一個兩列五行的網(wǎng)格倔毙，并將 grid-auto-flow屬性設(shè)置為row(即默認值):

.container{
    display: grid;
    grid-template-columns: 60px 60px 60px 60px 60px;
    grid-template-rows: 30px 30px;
    grid-auto-flow: row;
}

當在網(wǎng)格上放置項目時埃仪，您只需要指定其中兩個的網(wǎng)格項

.item-a{
    grid-column: 1;
    grid-row: 1 / 3;
}
.item-e{
    grid-column: 5;
    grid-row: 1 / 3;

因為我們將grid-auto-flow屬性設(shè)置為了row，所以我們的網(wǎng)格看起來會像這個樣子陕赃。注意我們沒有進行設(shè)置的三個網(wǎng)格項(item-b, item-c and item-d),會沿行軸進行布局卵蛉。

grid-auto-flow-row

如果我們將grid-auto-flow屬性設(shè)置為 column,item-b, item-c 和 item-d 就會沿列軸進行布局。

.container{
    display: grid;
    grid-template-columns: 60px 60px 60px 60px 60px;
    grid-template-rows: 30px 30px;
    grid-auto-flow: column;
}

grid-auto-flow-column

grid

在一行聲明中設(shè)置一下所有屬性的簡寫形式:grid-template-rows, grid-template-column, grid-template-areas, grid-auto-rows,grid-auto-columns, 以及 grid-auto-flow么库。它將grid-column-gap 和 grid-row-gap
屬性設(shè)置為初始值傻丝，即使它們不能由此屬性顯式去設(shè)置。
屬性值:
none: 將所有的子屬性設(shè)置為初始值
subgrid: 將grid-template-rows和grid-template-columns屬性值設(shè)置為subgrid其余子屬性設(shè)置為初始值
<grid-template-rows> / <grid-template-columns>: 將grid-template-rows和 grid-template-columns
分別設(shè)置為指定值诉儒，其余子屬性設(shè)置為初始值
<grid-auto-flow>[<grid-auto-rows> [ / <grid-auto-columns>] ] : grid-auto-flow, grid-auto-rows和 grid-auto-columns屬性分別接受相同的值,如果省略了grid-auto-columns屬性葡缰，它將設(shè)置為grid-auto-rows屬性的值。如果兩者均被忽略，那么都將被設(shè)置為初始值泛释。

.container{
    grid: none | subgrid | <grid-template-rows> / <grid-template-columns> | <grid-auto-flow> [<grid-auto-rows> [/ <grid-auto-columns>]];
}

示例：
以下兩個代碼塊是等效的：

.container{
    grid: 200px auto / 1fr auto 1fr;
}

.container{
    grid-template-rows: 200px auto;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: none;
}

以下兩個代碼塊同樣也是等效的：

.container{
    grid: column 1fr / auto;
}

.container{
    grid-auto-flow: column;
    grid-auto-rows: 1fr;
    grid-auto-columns: auto;        
}

它還接受一次性設(shè)置所有屬性滤愕，更復(fù)雜但相當方便的語法。指定 grid-template-areas
, grid-auto-rows 和 grid-auto-columns屬性胁澳，其他所有子屬性都將設(shè)置為其初始值该互。你現(xiàn)在所做的是在其網(wǎng)格區(qū)域內(nèi)，指定網(wǎng)格線名稱和內(nèi)聯(lián)軌道大小韭畸。這里最容易用一個例子來描述：

.container{
  grid: [row1-start] "header header header" 1fr [row1-end]
        [row2-start] "footer footer footer" 25px [row2-end]
        / auto 50px auto;
}

等同于：

.container{  
  grid-template-areas: "header header header"
                       "footer footer footer";
  grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto; 
}

網(wǎng)格項的屬性（Properties for the Grid Items）

grid-column-start
grid-column-end
grid-row-start
grid-row-end
通過使用特定的網(wǎng)格線確定網(wǎng)格項在網(wǎng)格內(nèi)的位置宇智。grid-column-start/grid-row-start屬性表示網(wǎng)格項的網(wǎng)格線的起始位置，grid-column-end/grid-row-end屬性表示網(wǎng)格項的網(wǎng)格線的終止位置胰丁。
屬性值:
**<line>
**: 可以是一個數(shù)字來指代相應(yīng)編號的網(wǎng)格線随橘，或者使用名稱指代相應(yīng)命名的網(wǎng)格線
span <number>: 網(wǎng)格項包含指定數(shù)量的網(wǎng)格軌道
span <name>: 網(wǎng)格項包含指定名稱網(wǎng)格項的網(wǎng)格線之前的網(wǎng)格軌道
auto: 表明自動定位，自動跨度或者默認跨度為一

.item{
  grid-column-start: <number> | <name> | span <number> | span <name> | auto
  grid-column-end: <number> | <name> | span <number> | span <name> | auto
  grid-row-start: <number> | <name> | span <number> | span <name> | auto
  grid-row-end: <number> | <name> | span <number> | span <name> | auto
}

示例：

.item-a{
  grid-column-start: 2;
  grid-column-end: five;
  grid-row-start: row1-start
  grid-row-end: 3
}

grid-start-end-a

.item-b{
  grid-column-start: 1;
  grid-column-end: span col4-start;
  grid-row-start: 2
  grid-row-end: span 2
}

grid-start-end-b

如果沒有聲明grid-column-end/grid-row-end屬性锦庸，默認情況下網(wǎng)格項的跨度為1机蔗。
網(wǎng)格項可以互相重疊「氏簦可以使用z-index屬性控制堆疊順序萝嘁。
grid-column
grid-row
grid-column-start+grid-column-end, 和grid-row-start+grid-row-end屬性分別的簡寫形式。
屬性值:
<start-line> / <end-line>：每一個屬性均接收自定義的一個相同值扬卷，包括跨度牙言。

.item{
  grid-column: <start-line> / <end-line> | <start-line> / span <value>;
  grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}

示例：

grid-start-end-c.png

.item-c{
  grid-column: 3 / span 2;
  grid-row: third-line / 4;
}

如果沒有聲明結(jié)束網(wǎng)格線值，默認網(wǎng)格軌道跨度為1.
grid-area
屬性值:
<name> - 你定義的名字
<row-start> / <column-start> / <row-end> / <column-end> - 可以是數(shù)字或者命名行
示例：
為網(wǎng)格項命名的一種方式：

.item-d{
  grid-area: header
}

grid-row-start + grid-column-start+ grid-row-end+ grid-column-end屬性的一種簡寫方式:

.item-d{
  grid-area: 1 / col4-start / last-line / 6
}

grid-start-end-d

justify-self
沿列軸對齊網(wǎng)格項中的內(nèi)容(相反于align-item屬性定義的沿行軸對齊)怪得。此值適用于單一網(wǎng)格項中的內(nèi)容咱枉。
屬性值:
start: 內(nèi)容與網(wǎng)格區(qū)域的左端對齊
end: 內(nèi)容與網(wǎng)格區(qū)域的右端對齊
center: 內(nèi)容處于網(wǎng)格區(qū)域的中間位置
stretch: 內(nèi)容寬度占據(jù)整個網(wǎng)格區(qū)域空間(默認值)

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

示例

.item-a{
  justify-self: start;
}
![grid-justify-self-start](http://upload-images.jianshu.io/upload_images/1673685-7852d1a5d23c8293.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

.item-a{
  justify-self: end;
}

grid-justify-self-end

.item-a{
  justify-self: center;
}

grid-justify-self-center

.item-a{
  justify-self: stretch;
}

grid-justify-self-stretch

設(shè)置網(wǎng)格中所有網(wǎng)格項的對齊方式，可以使用網(wǎng)格容器上的justify-items屬性徒恋。

align-self
沿行軸對齊網(wǎng)格項中的內(nèi)容(相反于justify-item屬性定義的沿列軸對齊)蚕断。此值適用于單一網(wǎng)格項中的內(nèi)容。
屬性值:
start: 內(nèi)容與網(wǎng)格區(qū)域的頂端對齊
end: 內(nèi)容與網(wǎng)格區(qū)域的底部對齊
center: 內(nèi)容處于網(wǎng)格區(qū)域的中間位置
stretch: 內(nèi)容高度占據(jù)整個網(wǎng)格區(qū)域空間(默認值)

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

示例：

.item-a{
  align-self: start;
}

grid-align-self-start

.item-a{
  align-self: end;
}

grid-align-self-end

.item-a{
  align-self: center;
}

grid-align-self-center

.item-a{
  align-self: stretch;
}

grid-align-self-stretch

本文翻譯自 http://chris.house/blog/a-complete-guide-css-grid-layout/#prop-grid-template-areas
轉(zhuǎn)載請注明英文原版出處

最后編輯于：2017.12.04 08:23:26

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末入挣，一起剝皮案震驚了整個濱河市亿乳，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌径筏，老刑警劉巖风皿，帶你破解...
沈念sama閱讀 218,640評論 6贊 507
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異匠璧，居然都是意外死亡，警方通過查閱死者的電腦和手機咸这，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,254評論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門夷恍，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事酿雪《舯” “怎么了？”我有些...
開封第一講書人閱讀 165,011評論 0贊 355
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵指黎，是天一觀的道長朋凉。經(jīng)常有香客問我，道長醋安，這世上最難降的妖魔是什么杂彭？我笑而不...
開封第一講書人閱讀 58,755評論 1贊 294
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮吓揪，結(jié)果婚禮上亲怠，老公的妹妹穿的比我還像新娘。我一直安慰自己柠辞，他們只是感情好团秽，可當我...
茶點故事閱讀 67,774評論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著叭首，像睡著了一般习勤。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上焙格，一...
開封第一講書人閱讀 51,610評論 1贊 305
城市分裂傳說
那天图毕，我揣著相機與錄音，去河邊找鬼间螟。笑死吴旋，一個胖子當著我的面吹牛，可吹牛的內(nèi)容都是我干的厢破。我是一名探鬼主播荣瑟，決...
沈念sama閱讀 40,352評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼摩泪！你這毒婦竟也來了笆焰？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 39,257評論 0贊 276
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤见坑，失蹤者是張志新（化名）和其女友劉穎嚷掠，沒想到半個月后，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體荞驴，經(jīng)...
沈念sama閱讀 45,717評論 1贊 315
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡不皆，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 37,894評論 3贊 336
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了熊楼。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片霹娄。...
茶點故事閱讀 40,021評論 1贊 350
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出犬耻，到底是詐尸還是另有隱情踩晶，我是刑警寧澤，帶...
沈念sama閱讀 35,735評論 5贊 346
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布枕磁，位于F島的核電站渡蜻，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏计济。R本人自食惡果不足惜茸苇，卻給世界環(huán)境...
茶點故事閱讀 41,354評論 3贊 330
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望峭咒。院中可真熱鬧税弃，春花似錦、人聲如沸凑队。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,936評論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽漩氨。三九已至西壮，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間叫惊，已是汗流浹背款青。一陣腳步聲響...
開封第一講書人閱讀 33,054評論 1贊 270
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留霍狰，地道東北人抡草。一個月前我還...
沈念sama閱讀 48,224評論 3贊 371
代替公主和親
正文我出身青樓，卻偏偏與公主長得像蔗坯，于是被迫代替她去往敵國和親康震。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
茶點故事閱讀 44,974評論 2贊 355

CSS網(wǎng)格布局完整指南

簡介

基礎(chǔ)知識與瀏覽器支持

重要術(shù)語

網(wǎng)格容器（Grid Container）

網(wǎng)格項（Grid Item）

網(wǎng)格線（Gird Line）

網(wǎng)格軌道（Grid Track）

網(wǎng)格單元格（Grid Cell）

網(wǎng)格區(qū)域（Grid Area）

網(wǎng)格屬性目錄（Grid Properties Table of Contents）

網(wǎng)格容器的屬性（Properties for the Grid Container）

display

grid-template-columns 和 grid-template-rows

grid-template-areas

grid-column-gap 和 grid-row-gap

grid-gap

justify-items

align-items

justify-content

align-content

grid-auto-columns和 grid-auto-rows

grid-auto-flow

grid

網(wǎng)格項的屬性（Properties for the Grid Items）

推薦閱讀更多精彩內(nèi)容