Grid 布局的屬性分成兩類低剔。一類定義在容器上面账蓉，稱為容器屬性袱蚓；另一類定義在項(xiàng)目上面钞啸，稱為項(xiàng)目屬性。
容器屬性
1. display屬性
指定一個(gè)容器采用網(wǎng)格布局
div {
display: grid;
}
div {
display: inline-grid; //設(shè)置為行內(nèi)元素
}
注意喇潘，設(shè)為網(wǎng)格布局以后体斩，容器子元素（項(xiàng)目）的float、display: inline-block颖低、display: table-cell絮吵、vertical-align和column-*等設(shè)置都將失效。
2. grid-template-columns 屬性忱屑，grid-template-rows 屬性
grid-template-columns屬性定義每一列的列寬蹬敲，grid-template-rows屬性定義每一行的行高。
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}
.container {
display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;
grid-template-rows: 33.33% 33.33% 33.33%;
}
.container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
}
//grid-template-columns: repeat(2, 100px 20px 80px);
repeat()接受兩個(gè)參數(shù)想幻，第一個(gè)參數(shù)是重復(fù)的次數(shù)（上例是3），第二個(gè)參數(shù)是所要重復(fù)的值话浇。
repeat()重復(fù)某種模式也是可以的脏毯。
auto-fill auto-fit關(guān)鍵字
.container {
display: grid;
grid-template-columns(auto-fill,100px);
grid-template-columns(auto-fit,100px);
}
有時(shí)，單元格的大小是固定的幔崖，但是容器的大小不確定食店。如果希望每一行（或每一列）容納盡可能多的單元格，這時(shí)可以使用auto-fill關(guān)鍵字表示自動(dòng)填充赏寇。
假設(shè)容器可以容納n個(gè)單元格吉嫩，但是只有m個(gè)項(xiàng)目時(shí)(n>m)，atuo-fill會(huì)生成n個(gè)單元格嗅定，auto-fit只會(huì)生成m個(gè)單元格自娩。項(xiàng)目數(shù)多于容器單行可容納單元格的情況下兩個(gè)屬性作用相同。
fr關(guān)鍵字
為了方便表示比例關(guān)系渠退，網(wǎng)格布局提供了fr關(guān)鍵字（fraction 的縮寫(xiě)忙迁，意為"片段"）。如果兩列的寬度分別為1fr和2fr碎乃，就表示后者是前者的兩倍姊扔。fr可以與絕對(duì)長(zhǎng)度單位一起使用。
grid-template-columns: 1fr 2fr 3fr;
grid-template-columns: 150px 1fr 2fr; //第一列的寬度為150像素梅誓，第二列的寬度是第三列的一半恰梢。
grid-template-columns: 1fr 1fr minmax(100px, 1fr); //表示列寬不小于100px佛南，不大于1fr
網(wǎng)格線的名稱
grid-template-columns屬性和grid-template-rows屬性里面，還可以使用方括號(hào)嵌言，指定每一根網(wǎng)格線的名字嗅回，方便以后的引用。
上面代碼指定網(wǎng)格布局為3行 x 3列呀页，因此有4根垂直網(wǎng)格線和4根水平網(wǎng)格線妈拌。方括號(hào)里面依次是這八根線的名字。
網(wǎng)格布局允許同一根線有多個(gè)名字蓬蝶，比如[fifth-line row-5]尘分。
.container {
display: grid;
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}
3.row-gap 屬性，column-gap 屬性丸氛，gap 屬性
row-gap屬性設(shè)置行與行的間隔（行間距）培愁，column-gap屬性設(shè)置列與列的間隔（列間距）。
gap屬性是column-gap和row-gap的合并簡(jiǎn)寫(xiě)形式缓窜。
grid-gap: <grid-row-gap> <grid-column-gap>;
grid-gap：20px 20px;
4.grid-template-areas 屬性
網(wǎng)格布局允許指定"區(qū)域"（area）定续，一個(gè)區(qū)域由單個(gè)或多個(gè)單元格組成。grid-template-areas屬性用于定義區(qū)域禾锤。
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-template-areas: 'a b c'
'd e f'
'g h i';
}
//上面代碼將9個(gè)單元格分成a私股、b、c三個(gè)區(qū)域恩掷。
grid-template-areas: 'a a a'
'b b b'
'c c c';
//如果某些區(qū)域不需要利用倡鲸，則使用"點(diǎn)"（.）表示。
grid-template-areas: 'a . c'
'd . f'
'g . i';
注意黄娘，區(qū)域的命名會(huì)影響到網(wǎng)格線峭状。每個(gè)區(qū)域的起始網(wǎng)格線，會(huì)自動(dòng)命名為區(qū)域名-start逼争，終止網(wǎng)格線自動(dòng)命名為區(qū)域名-end优床。
比如，區(qū)域名為header誓焦，則起始位置的水平網(wǎng)格線和垂直網(wǎng)格線叫做header-start胆敞，終止位置的水平網(wǎng)格線和垂直網(wǎng)格線叫做header-end。
5.grid-auto-flow
默認(rèn)值是row杂伟，即"先行后列"竿秆。也可以將它設(shè)成column，變成"先列后行"稿壁。
grid-auto-flow: column;
grid-auto-flow屬性除了設(shè)置成row和column幽钢，還可以設(shè)成row dense和column dense。這兩個(gè)值主要用于傅是，某些項(xiàng)目指定位置以后匪燕，剩下的項(xiàng)目怎么自動(dòng)放置蕾羊。
grid-auto-flow: row;
grid-auto-flow: row dense;
6.justify-items 屬性，align-items 屬性帽驯，place-items 屬性
justify-items屬性設(shè)置單元格內(nèi)容的水平位置（左中右）龟再，align-items屬性設(shè)置單元格內(nèi)容的垂直位置（上中下）。
.container {
justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
}
- start：對(duì)齊單元格的起始邊緣尼变。
- end：對(duì)齊單元格的結(jié)束邊緣利凑。
- center：?jiǎn)卧駜?nèi)部居中。
- stretch：拉伸嫌术，占滿單元格的整個(gè)寬度（默認(rèn)值）哀澈。
place-items屬性是align-items屬性和justify-items屬性的合并簡(jiǎn)寫(xiě)形式。如果省略第二個(gè)值度气，則瀏覽器認(rèn)為與第一個(gè)值相等割按。
place-items: <align-items> <justify-items>;
7.justify-content 屬性，align-content 屬性磷籍，place-content 屬性
justify-content屬性是整個(gè)內(nèi)容區(qū)域在容器里面的水平位置（左中右）适荣，align-content屬性是整個(gè)內(nèi)容區(qū)域的垂直位置（上中下）。
.container {
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}
place-content屬性是align-content屬性和justify-content屬性的合并簡(jiǎn)寫(xiě)形式院领。
place-content: <align-content> <justify-content>
8.grid-auto-columns 屬性弛矛，grid-auto-rows 屬性
有時(shí)候，一些項(xiàng)目的指定位置比然，在現(xiàn)有網(wǎng)格的外部丈氓。比如網(wǎng)格只有3列，但是某一個(gè)項(xiàng)目指定在第5行谈秫。這時(shí)扒寄，瀏覽器會(huì)自動(dòng)生成多余的網(wǎng)格鱼鼓，以便放置項(xiàng)目拟烫。
grid-auto-columns屬性和grid-auto-rows屬性用來(lái)設(shè)置，瀏覽器自動(dòng)創(chuàng)建的多余網(wǎng)格的列寬和行高迄本。它們的寫(xiě)法與grid-template-columns和grid-template-rows完全相同硕淑。如果不指定這兩個(gè)屬性，瀏覽器完全根據(jù)單元格內(nèi)容的大小嘉赎，決定新增網(wǎng)格的列寬和行高置媳。
grid-auto-rows: 200px;
9. grid-template和grid
grid-template屬性是grid-template-columns、grid-template-rows和grid-template-areas這三個(gè)屬性的合并簡(jiǎn)寫(xiě)形式公条。
grid屬性是grid-template-rows拇囊、grid-template-columns、grid-template-areas靶橱、 grid-auto-rows寥袭、grid-auto-columns路捧、grid-auto-flow這六個(gè)屬性的合并簡(jiǎn)寫(xiě)形式。
容器屬性
1.grid-column-start 屬性传黄，grid-column-end 屬性杰扫，grid-row-start 屬性，grid-row-end 屬性
用于指定項(xiàng)目位置
- grid-column-start屬性：左邊框所在的垂直網(wǎng)格線
- grid-column-end屬性：右邊框所在的垂直網(wǎng)格線
- grid-row-start屬性：上邊框所在的水平網(wǎng)格線
- grid-row-end屬性：下邊框所在的水平網(wǎng)格線
.item-1 {
grid-column-start: 2;
grid-column-end: 4;
}
.item-1 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 4;
}
這四個(gè)屬性的值膘掰，除了指定為第幾個(gè)網(wǎng)格線章姓，還可以指定為網(wǎng)格線的名字。
.item-1 {
grid-column-start: header-start;
grid-column-end: header-end;
}
這四個(gè)屬性的值還可以使用span關(guān)鍵字识埋，表示"跨越"凡伊，即左右邊框（上下邊框）之間跨越多少個(gè)網(wǎng)格。
.item-1 {
grid-column-start: span 2;
// 效果等同于上面（start惭聂、end同時(shí)存在時(shí)優(yōu)先使用start）
// grid-column-end: span 2;
}
使用這四個(gè)屬性窗声，如果產(chǎn)生了項(xiàng)目的重疊，則使用z-index屬性指定項(xiàng)目的重疊順序辜纲。
2. grid-column 屬性笨觅，grid-row 屬性
grid-column屬性是grid-column-start和grid-column-end的合并簡(jiǎn)寫(xiě)形式，grid-row屬性是grid-row-start屬性和grid-row-end的合并簡(jiǎn)寫(xiě)形式耕腾。
.item-1 {
grid-column: 1 / 3;
grid-row: 1 / 2;
}
/* 等同于 */
.item-1 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
}
3. grid-area 屬性
grid-area屬性指定項(xiàng)目放在哪一個(gè)區(qū)域见剩。
.container{
grid-template-areas: 'a b c'
'd e f'
'g h i';
}
.item-1{
grid-area: e;
}
grid-area與grid-column、grid-row同時(shí)存在時(shí)后指定的生效扫俺。
.container{
grid-template-areas: 'a b c'
'd e f'
'g h i';
}
.item-1{
grid-column: 1/2;
grid-area: e;
grid-row: 1/2;
}
grid-area屬性還可用作grid-row-start苍苞、grid-column-start、grid-row-end狼纬、grid-column-end的合并簡(jiǎn)寫(xiě)形式羹呵，直接指定項(xiàng)目的位置。
.item {
grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}
4. justify-self 屬性疗琉，align-self 屬性冈欢，place-self 屬性
參考 justify-items 屬性，align-items 屬性盈简，place-items 屬性凑耻，針對(duì)當(dāng)前項(xiàng)目使用。
