簡(jiǎn)介
CSS Grid布局 （又名"網(wǎng)格"），是一個(gè)基于二維網(wǎng)格布局的系統(tǒng)，旨在改變我們基于網(wǎng)格設(shè)計(jì)的用戶界面方式。正如我們所知，CSS 總是用于布局我們的網(wǎng)頁(yè)，但它并沒(méi)有做的很好。剛開(kāi)始的時(shí)候我們使用表格(table)，然后使用浮動(dòng)(float)、 定位(position)和內(nèi)聯(lián)塊(inline-block)，但所有這些方法本質(zhì)上來(lái)講都是hacks，并留下了很多需要實(shí)現(xiàn)的重要功能問(wèn)題（例如垂直居中），雖然Flexbox可以起到一定的補(bǔ)救作用，但是旨在用于更簡(jiǎn)單的一維布局，并不適用于復(fù)雜的二維布局(實(shí)際上 Flexbox 和 Grid 可以一起結(jié)合使用起到最佳效果)。網(wǎng)格（Grid）是第一個(gè)專門為解決布局問(wèn)題而創(chuàng)建的CSS模塊，用來(lái)解決我們之前在制作網(wǎng)站時(shí)使用hacks處理布局問(wèn)題。
這里有兩件事情啟發(fā)我創(chuàng)建本指南。第一個(gè)是 Rachel Andrew 的令人敬畏的書(shū)--為 CSS Grid 布局做好準(zhǔn)備。這本書(shū)很詳盡明確的的介紹了Grid，是整篇文章的基礎(chǔ)。我強(qiáng)烈鼓勵(lì)你買它，讀它。另外一個(gè)很大的靈感來(lái)自于 Chris Coyier 的-- Flexbox完整指南，這本書(shū)是我了解Flebox的一個(gè)很優(yōu)秀的資源。它幫助了很多人，這是事實(shí)，這里，我還想補(bǔ)充一句，當(dāng)你使用谷歌搜索"flexbox"時(shí)，會(huì)出現(xiàn)很多類似的資源，但是為什么不直接利用最好的資源呢？
我書(shū)寫(xiě)此指南的目的是基于目前最新規(guī)范的版本，規(guī)范其網(wǎng)格概念。所以我不會(huì)再次提及過(guò)時(shí)的 IE 語(yǔ)法，并且隨著規(guī)范的成熟，我會(huì)盡我們所能定期更新此指南。
基礎(chǔ)知識(shí)與瀏覽器支持
Grid 的入門是很容易的。你只需要定義一個(gè)容器元素并設(shè)置display：grid，使用grid-template-columns和 grid-template-rows屬性設(shè)置網(wǎng)格的列與行的大小，然后使用grid-column和 grid-row屬性將其子元素放入網(wǎng)格之中。與flexbox類似，網(wǎng)格項(xiàng)的源順序并不重要。你的CSS可以按任何順序放置，這使得你很容易重新布局網(wǎng)格與媒體查詢。想象一下你定義的整個(gè)頁(yè)面布局，然后如果想要完全重新布局以適應(yīng)不同的屏幕寬度，這時(shí)僅僅使用幾行 CSS 代碼就可以實(shí)現(xiàn)。Grid是有史以來(lái)最強(qiáng)大 CSS 模塊之一。
關(guān)于 Grid 一件很重要的事情就是它現(xiàn)在還不適用于項(xiàng)目使用。目前還處于 W3C 的工作草案之中，并且默認(rèn)情況下，還不被所有的瀏覽器正確支持。Internet Explorer 10 和 11 已經(jīng)可以實(shí)現(xiàn)支持，但也是利用一種過(guò)時(shí)的語(yǔ)法實(shí)現(xiàn)的。現(xiàn)在出于示例演示，我建議你使用啟用了特殊標(biāo)志的 Chrome, Opera 或者 Firefox 。在 Chrome，導(dǎo)航到chrome://flags并啟用" web 實(shí)驗(yàn)平臺(tái)功能"。該方法同樣適用于 Opera (opera://flags)。在Firefox中，啟用 layout.css.grid.enabled標(biāo)志。
這里有一張瀏覽器支持情況的表格(之后我會(huì)繼續(xù)更新):
除了Microsoft，瀏覽器廠商似乎想要等到Grid規(guī)范完全成熟后再加以推廣。這是一件好事，因?yàn)檫@意味著我們就不需要擔(dān)心學(xué)習(xí)多個(gè)語(yǔ)法。
這只是時(shí)間問(wèn)題，你可以在生產(chǎn)環(huán)境中使用Grid。但是現(xiàn)在你需要開(kāi)始學(xué)習(xí)它了。
重要術(shù)語(yǔ)
在深入研究網(wǎng)格的概念之前，我們需要理解其相關(guān)術(shù)語(yǔ)概念。 因?yàn)檫@里所涉及的術(shù)語(yǔ)在概念上都有點(diǎn)類似，如果你不首先記住Grid規(guī)范定義，你就會(huì)很容易將其與其他概念相混淆。 但是不需要擔(dān)心，這里的屬性并沒(méi)有很多。
網(wǎng)格容器（Grid Container）
當(dāng)一個(gè)元素的屬性設(shè)置為display：grid時(shí)， 它是所有網(wǎng)格項(xià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)格項(xiàng)（Grid Item）
網(wǎng)格容器的子節(jié)點(diǎn)(例如直接后代)。這里 item元素都是網(wǎng)格項(xià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)格軌道（Grid Track）
兩個(gè)相鄰網(wǎng)格線之間的空間。你可以把它們想象成網(wǎng)格的列或行。下圖所示的是第二行和第三行網(wǎng)格線之間的網(wǎng)格軌道。
網(wǎng)格單元格（Grid Cell）
兩個(gè)相鄰的行和兩個(gè)相鄰的列之間的網(wǎng)格線空間。它是網(wǎng)格的一個(gè)"單位"。下面圖片所示的是行網(wǎng)格線line 1
和line 2與列網(wǎng)格線line 2和 line 3之間的網(wǎng)格單元格。
網(wǎng)格區(qū)域（Grid Area）
網(wǎng)格區(qū)域?yàn)樗臈l網(wǎng)格線所包圍的總空間。 網(wǎng)格區(qū)域可以由任何數(shù)量的網(wǎng)格單元組成。下面圖片所示的是行網(wǎng)格線line 1，line3和列網(wǎng)格線line 1，line 3之間的網(wǎng)格區(qū)域。
網(wǎng)格屬性目錄（Grid Properties Table of Contents）
網(wǎng)格容器的屬性（Properties for the Grid Container）
display
將元素定義為網(wǎng)格容器，并為其內(nèi)容建立新的網(wǎng)格格式上下文。
屬性值:
grid : 聲明一個(gè)塊級(jí)的網(wǎng)格
inline-grid : 聲明一個(gè)內(nèi)聯(lián)級(jí)的網(wǎng)格
subgrid：如果你的網(wǎng)格容器本身是一個(gè)網(wǎng)格項(xiàng)（即嵌套網(wǎng)格），你可以使用此屬性來(lái)表示你希望其行/列的大小從其父項(xiàng)繼承，而不是自定義屬性。
.container{
display: grid | inline-grid | subgrid;
}
注：column, float, clear, 和 vertical-align 元素對(duì)網(wǎng)格容器不起作用。
grid-template-columns 和 grid-template-rows
使用以空格分隔的值定義網(wǎng)格的列和行。 這些值的大小表示軌道大小，它們之間的空間表示網(wǎng)格線。
屬性值:
<track-size> ：可以是一個(gè)長(zhǎng)度、百分比或者是網(wǎng)格中自由空間的一小部分(使用fr單位)
<line-name> ：你選擇的任意名稱
.container{
grid-template-columns: <track-size> ... | <line-name> <track-size> ...;
grid-template-rows: <track-size> ... | <line-name> <track-size> ...;
}
示例：
當(dāng)你在軌道值之間留有空格時(shí)，網(wǎng)絡(luò)線就會(huì)自動(dòng)分配數(shù)值名稱:
.container{
grid-template-columns: 40px 50px auto 50px 40px;
grid-template-rows: 25% 100px auto;
}
但是你也可以顯示命名，請(qǐng)參考括號(hào)語(yǔ)法中的行名稱命名方式:
.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];
}
請(qǐng)注意，一條網(wǎng)格線可以具有有多個(gè)名稱。例如，這里的第二行將有兩個(gè)名字:
row1-end和 row2-start:
.container{
grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
}
如果你的定義中包含重復(fù)的部分，你可以使用 repeat()標(biāo)識(shí)進(jìn)行精簡(jiǎn):
.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)格容器的可用空間的一小部分。 例如，如下所示把每個(gè)項(xiàng)目設(shè)置為網(wǎng)格容器寬度的三分之一：
.container{
grid-template-columns: 1fr 1fr 1fr;
}
這里可用空間表示除去非彈性項(xiàng)后剩余的空間。在此示例中的fr單位的可用空間表示減去50px以后的空間大小:
.container{
grid-template-columns: 1fr 50px 1fr 1fr;
}
grid-template-areas
通過(guò)使用grid-area屬性來(lái)定義網(wǎng)格區(qū)域名稱，從而定義網(wǎng)格模板。網(wǎng)格區(qū)域重復(fù)的名稱就會(huì)導(dǎo)致內(nèi)容跨越這些單元格。句點(diǎn)表示一個(gè)空單元格。語(yǔ)法本身提供了一種可視化的網(wǎng)格結(jié)構(gòu)。
屬性值:
<grid-area-name> -：使用grid-area屬性定義網(wǎng)格區(qū)域名稱
. ：句點(diǎn)表示一個(gè)空的單元格
none - 表示無(wú)網(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)建一個(gè)四列三行的網(wǎng)格。最上面的一行為header區(qū)域。中間一行由兩個(gè)main區(qū)域，一個(gè)空單元格和一個(gè)sidebar區(qū)域。最后一行是footer區(qū)域。
你所聲明的每一行都需要具有相同數(shù)目的單元格。
你可以使用任意數(shù)量的句點(diǎn)
(.)聲明單個(gè)空單元格。只要句點(diǎn)之間沒(méi)有空格它們就表示一個(gè)空單元格。注意，你只是使用此語(yǔ)法進(jìn)行網(wǎng)格區(qū)域命名，而不是網(wǎng)格線命名。當(dāng)你使用此語(yǔ)法時(shí)，區(qū)域兩邊的線就會(huì)得到自動(dòng)命名。如果網(wǎng)格區(qū)域名稱為foo,則其行線和列線的名稱就將為foo-start，最后一行線及其最后一列線的名字就會(huì)為foo-end。這意味著一些線就可能具有多個(gè)名稱，如上面示例中所示，擁有三個(gè)名稱:
header-start,main-start, 以及footer-start。
grid-column-gap 和 grid-row-gap
指定網(wǎng)格線的大小。你可以把它想像成在行/列之間設(shè)置間距寬度。
屬性值:
<line-size> : 一個(gè)長(zhǎng)度值
.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;
}
間距僅僅在列/行之間產(chǎn)生，而不會(huì)在邊緣區(qū)。
grid-gap
grid-column-gap和grid-row-gap的簡(jiǎn)寫(xiě)值。
屬性值:
<grid-column-gap> 和<grid-row-gap> : 長(zhǎng)度值
.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;
}
如果沒(méi)有指定grid-row-gap屬性的值，默認(rèn)與grid-column-gap屬性值相同
justify-items
沿著列軸對(duì)齊網(wǎng)格項(xiàng)中的內(nèi)容(相反于align-items屬性定義的沿行軸對(duì)齊)。此值適用于容器內(nèi)所有的網(wǎng)格項(xiàng)。
屬性值:
start : 內(nèi)容在網(wǎng)格區(qū)域中左端對(duì)齊
end ：內(nèi)容在網(wǎng)格區(qū)域中右端對(duì)齊
center ：內(nèi)容在網(wǎng)格區(qū)域居中對(duì)齊
stretch ：內(nèi)容寬度占滿整個(gè)網(wǎng)格區(qū)域（默認(rèn)值）
.container{
justify-items: start | end | center | stretch;
}
示例：
.container{
justify-items: start;
}
.container{
justify-items: end;
}
.container{
justify-items: center;
}
.container{
justify-items: stretch;
}
以上特性也可以使用
justify-self屬性對(duì)各個(gè)網(wǎng)格項(xiàng)進(jìn)行設(shè)置。
align-items
沿行軸對(duì)齊網(wǎng)格項(xiàng)中的內(nèi)容(相反于justify-items屬性定義的沿列軸對(duì)齊)。此值適用于容器內(nèi)所有的網(wǎng)格項(xiàng)。
屬性值:
start : 內(nèi)容在網(wǎng)格區(qū)域中頂端對(duì)齊
end ：內(nèi)容在網(wǎng)格區(qū)域中底部對(duì)齊
center ：內(nèi)容在網(wǎng)格區(qū)域居中對(duì)齊
stretch ：內(nèi)容寬度占滿整個(gè)網(wǎng)格區(qū)域（默認(rèn)值）
.container{
align-items: start | end | center | stretch;
}
示例：
.container{
align-items: start;
}
.container{
align-items: end;
}
.container{
align-items: center;
}
.container{
align-items: stretch;
}
以上特性也可以使用
align-self屬性對(duì)各個(gè)網(wǎng)格項(xiàng)進(jìn)行設(shè)置。
justify-content
如果你的網(wǎng)格項(xiàng)目都是使用像px這樣的非響應(yīng)式單位來(lái)計(jì)算的，就有可能出現(xiàn)一種情況－－網(wǎng)格的總大小可能小于其網(wǎng)格容器的大小。 在這種情況下，您可以設(shè)置網(wǎng)格容器內(nèi)的網(wǎng)格的對(duì)齊方式。 此屬性沿著列軸對(duì)齊網(wǎng)格（相反于align-content屬性定義的沿行軸對(duì)齊）。
屬性值:
start -網(wǎng)格在網(wǎng)格容器中左端對(duì)齊
end - 網(wǎng)格在網(wǎng)格容器中右端對(duì)齊
center - 網(wǎng)格在網(wǎng)格容器中居中對(duì)齊
stretch - 調(diào)整網(wǎng)格項(xiàng)的大小，使其寬度填充整個(gè)網(wǎng)格容器
space-around -在網(wǎng)格項(xiàng)之間設(shè)置偶數(shù)個(gè)空格間隙，其最邊緣間隙大小為中間空格間隙大小的一半
space-between - 在網(wǎng)格項(xiàng)之間設(shè)置偶數(shù)個(gè)空格間隙，其最邊緣沒(méi)有間隙
space-evenly - 在網(wǎng)格項(xiàng)之間設(shè)置偶數(shù)個(gè)空格間隙，其最邊緣間隙與其相同
.container{
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
}
.container{
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;
}
.container{
justify-content: stretch;
}
.container{
justify-content: space-around;
}
.container{
justify-content: space-between;
}
.container{
justify-content: space-evenly;
}
align-content
如果你的網(wǎng)格項(xiàng)目都是使用像px這樣的非響應(yīng)式單位來(lái)計(jì)算的，就有可能出現(xiàn)一種情況－－網(wǎng)格的總大小可能小于其網(wǎng)格容器的大小。 在這種情況下，您可以設(shè)置網(wǎng)格容器內(nèi)的網(wǎng)格的對(duì)齊方式。 此屬性沿著行軸對(duì)齊網(wǎng)格（相反于justify-content屬性定義的沿列軸對(duì)齊）。
屬性值:
start -網(wǎng)格在網(wǎng)格容器中頂端對(duì)齊
end - 網(wǎng)格在網(wǎng)格容器中底端對(duì)齊
center - 網(wǎng)格在網(wǎng)格容器中居中對(duì)齊
stretch - 調(diào)整網(wǎng)格項(xiàng)的大小，使其寬度填充整個(gè)網(wǎng)格容器
space-around -在網(wǎng)格項(xiàng)之間設(shè)置偶數(shù)個(gè)空格間隙，其最邊緣間隙大小為中間空格間隙大小的一半
space-between - 在網(wǎng)格項(xiàng)之間設(shè)置偶數(shù)個(gè)空格間隙，其最邊緣沒(méi)有間隙
space-evenly - 在網(wǎng)格項(xiàng)之間設(shè)置偶數(shù)個(gè)空格間隙，其最邊緣間隙與其相同
.container{
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}
示例：
.container{
align-content: start;
}
.container{
align-content: end;
}
.container{
align-content: center;
}
.container{
align-content: stretch;
}
.container{
align-content: space-around;
}
.container{
align-content: space-between;
}
.container{
align-content: space-evenly;
}
grid-auto-columns和 grid-auto-rows
指定任何自動(dòng)生成的網(wǎng)格軌道（也稱為隱式網(wǎng)格軌道）的大小。 當(dāng)顯式定位超出定義網(wǎng)格范圍的行或列（通過(guò)grid-template-rows / grid-template-columns）時(shí)，將創(chuàng)建隱式網(wǎng)格軌道。
屬性值：
<track-size> ：可以是一個(gè)長(zhǎng)度、百分比或者是網(wǎng)格中自由空間的一小部分(使用fr單位)
.container{
grid-auto-columns: <track-size> ...;
grid-auto-rows: <track-size> ...;
}
為了說(shuō)明隱式網(wǎng)格軌道是如何創(chuàng)建的，請(qǐng)思考一下：
.container{
grid-template-columns: 60px 60px;
grid-template-rows: 90px 90px
}
這里創(chuàng)建了
2x2的網(wǎng)格。但現(xiàn)在試想一下你使用
grid-column和grid-row來(lái)定位你的網(wǎng)格項(xiàng)如下：
.item-a{
grid-column: 1 / 2;
grid-row: 2 / 3;
}
.item-b{
grid-column: 5 / 6;
grid-row: 2 / 3;
}
我們告訴.item-b在第列線 5開(kāi)始，在列線6結(jié)束，但是我們從未定義過(guò)列線 5或6。因?yàn)槲覀円昧瞬淮嬖诘牧校詣?chuàng)建寬度為0的隱式軌道來(lái)填充這個(gè)間隙。 我們可以使用
grid-auto-columns和grid-auto-rows來(lái)指定這些隱式軌道的寬度：
.container{
grid-auto-columns: 60px;
}
grid-auto-flow
如果您有未明確放置在網(wǎng)格上的網(wǎng)格項(xiàng)，則自動(dòng)布局算法會(huì)啟動(dòng)，以自動(dòng)放置項(xiàng)。 此屬性用來(lái)控制自動(dòng)布局算法的工作原理。
屬性值:
row : 告訴自動(dòng)布局算法依次填充每一行，并根據(jù)需要添加新行
column ：告訴自動(dòng)布局算法依次填充每一列，并根據(jù)需要添加新列
dense ： 告訴自動(dòng)布局算法嘗試在網(wǎng)格更早的時(shí)候填充接下來(lái)出現(xiàn)較小的項(xiàng)目留有的空白
.container{
grid-auto-flow: row | column | row dense | column dense
}
請(qǐng)注意，dense可能會(huì)導(dǎo)致您的項(xiàng)目無(wú)序顯示。
示例：
思考下面的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>
這里定義了一個(gè)兩列五行的網(wǎng)格，并將 grid-auto-flow屬性設(shè)置為row(即默認(rèn)值):
.container{
display: grid;
grid-template-columns: 60px 60px 60px 60px 60px;
grid-template-rows: 30px 30px;
grid-auto-flow: row;
}
當(dāng)在網(wǎng)格上放置項(xiàng)目時(shí)，您只需要指定其中兩個(gè)的網(wǎng)格項(xiàng)
.item-a{
grid-column: 1;
grid-row: 1 / 3;
}
.item-e{
grid-column: 5;
grid-row: 1 / 3;
因?yàn)槲覀儗?code>grid-auto-flow屬性設(shè)置為了row，所以我們的網(wǎng)格看起來(lái)會(huì)像這個(gè)樣子。注意我們沒(méi)有進(jìn)行設(shè)置的三個(gè)網(wǎng)格項(xiàng)(item-b, item-c and item-d),會(huì)沿行軸進(jìn)行布局。
如果我們將grid-auto-flow屬性設(shè)置為
column,item-b, item-c 和 item-d 就會(huì)沿列軸進(jìn)行布局。
.container{
display: grid;
grid-template-columns: 60px 60px 60px 60px 60px;
grid-template-rows: 30px 30px;
grid-auto-flow: column;
}
grid
在一行聲明中設(shè)置一下所有屬性的簡(jiǎn)寫(xiě)形式: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>]];
}
示例：
以下兩個(gè)代碼塊是等效的：
.container{
grid: 200px auto / 1fr auto 1fr;
}
.container{
grid-template-rows: 200px auto;
grid-template-columns: 1fr auto 1fr;
grid-template-areas: none;
}
以下兩個(gè)代碼塊同樣也是等效的：
.container{
grid: column 1fr / auto;
}
.container{
grid-auto-flow: column;
grid-auto-rows: 1fr;
grid-auto-columns: auto;
}
它還接受一次性設(shè)置所有屬性，更復(fù)雜但相當(dāng)方便的語(yǔ)法。指定 grid-template-areas
, grid-auto-rows 和 grid-auto-columns屬性，其他所有子屬性都將設(shè)置為其初始值。你現(xiàn)在所做的是在其網(wǎng)格區(qū)域內(nèi)，指定網(wǎng)格線名稱和內(nèi)聯(lián)軌道大小。這里最容易用一個(gè)例子來(lái)描述：
.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)格項(xiàng)的屬性（Properties for the Grid Items）
grid-column-start
grid-column-end
grid-row-start
grid-row-end
通過(guò)使用特定的網(wǎng)格線確定網(wǎng)格項(xiàng)在網(wǎng)格內(nèi)的位置。grid-column-start/grid-row-start屬性表示網(wǎng)格項(xiàng)的網(wǎng)格線的起始位置，grid-column-end/grid-row-end屬性表示網(wǎng)格項(xiàng)的網(wǎng)格線的終止位置。
屬性值:
**<line>
**: 可以是一個(gè)數(shù)字來(lái)指代相應(yīng)編號(hào)的網(wǎng)格線，或者使用名稱指代相應(yīng)命名的網(wǎng)格線
span <number>: 網(wǎng)格項(xiàng)包含指定數(shù)量的網(wǎng)格軌道
span <name>: 網(wǎng)格項(xiàng)包含指定名稱網(wǎng)格項(xiàng)的網(wǎng)格線之前的網(wǎng)格軌道
auto: 表明自動(dòng)定位，自動(dòng)跨度或者默認(rèn)跨度為一
.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
}
.item-b{
grid-column-start: 1;
grid-column-end: span col4-start;
grid-row-start: 2
grid-row-end: span 2
}
如果沒(méi)有聲明
grid-column-end/grid-row-end屬性，默認(rèn)情況下網(wǎng)格項(xiàng)的跨度為1。網(wǎng)格項(xiàng)可以互相重疊。可以使用
z-index屬性控制堆疊順序。grid-column
grid-row
grid-column-start+grid-column-end, 和grid-row-start+grid-row-end屬性分別的簡(jiǎn)寫(xiě)形式。屬性值:
<start-line> / <end-line>： 每一個(gè)屬性均接收自定義的一個(gè)相同值，包括跨度。
.item{
grid-column: <start-line> / <end-line> | <start-line> / span <value>;
grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}
示例：
.item-c{
grid-column: 3 / span 2;
grid-row: third-line / 4;
}
如果沒(méi)有聲明結(jié)束網(wǎng)格線值，默認(rèn)網(wǎng)格軌道跨度為1.
grid-area
屬性值:
<name> - 你定義的名字
<row-start> / <column-start> / <row-end> / <column-end> - 可以是數(shù)字或者命名行
示例：
為網(wǎng)格項(xiàng)命名的一種方式：
.item-d{
grid-area: header
}
grid-row-start + grid-column-start+ grid-row-end+ grid-column-end屬性的一種簡(jiǎn)寫(xiě)方式:
.item-d{
grid-area: 1 / col4-start / last-line / 6
}
justify-self
沿列軸對(duì)齊網(wǎng)格項(xiàng)中的內(nèi)容(相反于align-item屬性定義的沿行軸對(duì)齊)。此值適用于單一網(wǎng)格項(xiàng)中的內(nèi)容。
屬性值:
start: 內(nèi)容與網(wǎng)格區(qū)域的左端對(duì)齊
end: 內(nèi)容與網(wǎng)格區(qū)域的右端對(duì)齊
center: 內(nèi)容處于網(wǎng)格區(qū)域的中間位置
stretch: 內(nèi)容寬度占據(jù)整個(gè)網(wǎng)格區(qū)域空間(默認(rèn)值)
.item{ justify-self: start | end | center | stretch;}
示例
.item-a{
justify-self: start;
}
.item-a{
justify-self: end;
}
.item-a{
justify-self: center;
}
.item-a{
justify-self: stretch;
}
設(shè)置網(wǎng)格中所有網(wǎng)格項(xiàng)的對(duì)齊方式，可以使用網(wǎng)格容器上的
justify-items屬性。
align-self
沿行軸對(duì)齊網(wǎng)格項(xiàng)中的內(nèi)容(相反于justify-item屬性定義的沿列軸對(duì)齊)。此值適用于單一網(wǎng)格項(xiàng)中的內(nèi)容。
屬性值:
start: 內(nèi)容與網(wǎng)格區(qū)域的頂端對(duì)齊
end: 內(nèi)容與網(wǎng)格區(qū)域的底部對(duì)齊
center: 內(nèi)容處于網(wǎng)格區(qū)域的中間位置
stretch: 內(nèi)容高度占據(jù)整個(gè)網(wǎng)格區(qū)域空間(默認(rèn)值)
.item{
align-self: start | end | center | stretch;
}
示例：
.item-a{
align-self: start;
}
.item-a{
align-self: end;
}
.item-a{
align-self: center;
}
.item-a{
align-self: stretch;
}
本文翻譯自 http://chris.house/blog/a-complete-guide-css-grid-layout/#prop-grid-template-areas
轉(zhuǎn)載請(qǐng)注明英文原版出處
