在講解Grid布局之前欢揖，我們常見布局方式有以下幾種
1反镇、normal flow （正常流，也叫文檔流）--內(nèi)聯(lián)元素從左往右排列送火，塊級元素從上往下排列。
2先匪、float+clear（浮動+清除）
3种吸、position relative+absolute（絕對定位）
4、display inline-block （行向布局）
5呀非、負(fù)margin
6坚俗、display:flex
Grid布局優(yōu)點：這是一個二維布局系統(tǒng)镜盯，最大優(yōu)點就是可以同時處理列和行，不像其他布局那樣猖败，主要是一維布局系統(tǒng)速缆。Grid布局目前在很多瀏覽器都可以支持了，詳細(xì)兼容情況去Caniuse查看恩闻。
由行和列組合包圍的網(wǎng)格線叫g(shù)rid item艺糜，由最外圍的行和列的邊框叫g(shù)rid container。紅色的123構(gòu)成的是行分界線（row grid lines）幢尚、黑色的1234構(gòu)成的是列分界線（column grid lines）
1破停、grid container的屬性：
（1）、grid-template-columns 設(shè)置列
（2）尉剩、grid-template-rows 設(shè)置行
（3）真慢、grid-template-areas 定位空間
（4）、grid-template （1）和（2）和（3）組合使用縮寫
（5）理茎、grid-column-gap 設(shè)置列間隙
（6）黑界、grid-row-gap 設(shè)置行間隙
（7）、grid-gap （5）和（6）組合使用縮寫
（8）皂林、justify-items 設(shè)置水平對齊內(nèi)容位置
（9）朗鸠、align-items 設(shè)置垂直對齊內(nèi)容位置
（10）、justify-content
（11）式撼、align-content
（12）童社、grid-auto-columns 創(chuàng)建隱式網(wǎng)格（不講，用的不多）
（13）著隆、grid-auto-rows 創(chuàng)建隱式網(wǎng)格（不講扰楼，用的不多）
（14）、grid-auto-flow 自動布局（不講美浦，用的不多）
（15）弦赖、grid
（1）利用grid-template-columns、grid-template-rows構(gòu)建網(wǎng)格
HTML
<div class="container"></div>
CSS
.container{
width:400px;
height:300px;
border:1px solid red;
display:grid; /*grid布局*/
grid-template-columns:10% auto 10%; /*設(shè)置列*/
grid-template-rows:50px auto 50px; /*設(shè)置行*/
}
【1】蹬竖、grid-template-columns:10% auto 10% 表示設(shè)置三列，第一列是父元素寬度10%流酬，第二列是自動適應(yīng)寬度币厕，第三列是父元素寬度10%；另外一種寫法：grid-template-columns：[colunms-1] 10% [colunms-2] auto [colunms-3] 10% 表示對每列起個名字芽腾，配合行方便后面放內(nèi)容（名字隨意）旦装、后面介紹更簡單方法直接用數(shù)字表示。
【2】摊滔、grid-template-rows:50px auto 50px 表示設(shè)置三行阴绢，第一行高度是50px,第二行高度是自適應(yīng)高度店乐，第三行高度是50px;另外一種寫法：grid-template-rows:[row-1] 50px [row-2] auto [row-3] 50px表示對每行起個名字，配合列方便后面放內(nèi)容（名字隨意）呻袭、后面介紹更簡單方法直接用數(shù)字表示眨八。
【3】、“fr”單位允許您將軌道大小設(shè)置為網(wǎng)格容器自由空間的一部分左电。 例如廉侧，下面的代碼會將每個 grid item 為 grid container 寬度的三分之一：
.container {
grid-template-columns: 1fr 1fr 1fr;
}
自由空間是在排除所有不可伸縮的 grid item 之后計算得到的。 在下面的示例中券腔，fr單位可用的自由空間總量不包括50px:
.container {
grid-template-columns: 1fr 50px 1fr 1fr;
}
（2）伏穆、grid-template-areas 定位空間
通過引用 grid-area屬性中名字和grid-template-areas名字匹配，從而為這些網(wǎng)格分配內(nèi)容和位置纷纫。 點號表示一個空單元格枕扫。
HTML
<div class="container">
<div class="header">header</div>
<div class="main">main</div>
<div class="aside">aside</div>
<div class="footer">footer</div>
</div>
CSS
.container{
width:400px;
height:300px;
border:1px solid red;
display:grid;
grid-template-columns:10% auto 10%;
grid-template-rows:50px auto 50px;
grid-template-areas:
"header header header"
". main aside" /*點號表示該單個元為空*/
"footer footer footer"
}
.header{
grid-area:header; /*header和grid-template-areas中header名字匹配*/
background:red;
}
.main{ grid-area:main;background:blue;}
.aside{ grid-area:aside;background:yellow;}
.footer{ grid-area:footer;background:grey;}
【1】、grid-template是grid-template-rows辱魁、grid-template-columns烟瞧、grid-template-areas 三個組合一起的縮寫。
.container{
grid-template:
"header header header" 50px
". main aside" auto
"footer footer footer" 50px
/10% auto 10%
}
等價于
.container{
grid-template-columns:10% auto 10%;
grid-template-rows:50px auto 50px;
grid-template-areas:
"header header header"
". main aside"
"footer footer footer"
}
（3）染簇、grid-column-gap和grid-row-gap設(shè)置網(wǎng)格行和列的間隙
.container{
/*省略部分代碼*/
grid-column-gap:10px;
grid-row-gap:10px;
}
注意：這里間隙可以用padding或者margin進(jìn)行設(shè)置
【1】参滴、grid-gap是grid-column-gap和grid-row-gap的縮寫用法
.container {
/*省略部分代碼*/
grid-gap: 10px 10px; /*第一個是row，第二個是column*/
}
（4）锻弓、justify-items
沿著行軸對齊網(wǎng)格內(nèi)的內(nèi)容（與之對應(yīng)的是 align-items, 即沿著列軸對齊）砾赔，該值適用于容器內(nèi)的所有的 grid items。
值：
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ū)域空間(這是默認(rèn)值)
舉值為center例子青灼，其他值情況可以自己測試一下
.container {
/*省略部分代碼*/
justify-items: center;
}
給單個 grid item 設(shè)置justify-items屬性（嵌套使用grid布局）
.container {
/*省略部分代碼*/
}
.header{
grid-area:header;
background:red;
display:grid;
justify-items:center;
}
（5）暴心、align-items
沿著列軸對齊grid item 里的內(nèi)容（與之對應(yīng)的是使用 justify-items 設(shè)置沿著行軸對齊），該值適用于容器內(nèi)的所有 grid items杂拨。
值：
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ū)域空間(這是默認(rèn)值)
舉值為center例子专普，其他值情況可以自己測試一下
.container {
/*省略部分代碼*/
align-items:center;
}
給單個 grid item 設(shè)置 align-items屬性（嵌套使用grid布局）
.container {
/*省略部分代碼*/
}
.header{
grid-area:header;
background:red;
display:grid;
align-items:center;
}
（6）、justify-content（水平方向）弹沽、align-content（垂直方向）
有時檀夹，網(wǎng)格的總大小可能小于其網(wǎng)格容器的大小。如果你的所有 grid items 都使用像px這樣的非彈性單位來設(shè)置大小策橘，則可能發(fā)生這種情況炸渡。
值：
start - 網(wǎng)格與網(wǎng)格容器的左邊對齊
end - 網(wǎng)格與網(wǎng)格容器的右邊對齊
center - 網(wǎng)格與網(wǎng)格容器的中間對齊
stretch - 調(diào)整g rid item 的大小，讓寬度填充整個網(wǎng)格容器
space-around - 在 grid item 之間設(shè)置均等寬度的空白間隙丽已，其外邊緣間隙大小為中間空白間隙寬度的一半
space-between - 在 grid item 之間設(shè)置均等寬度空白間隙偶摔，其外邊緣無間隙
space-evenly - 在每個 grid item 之間設(shè)置均等寬度的空白間隙，包括外邊緣
例如按照之前例子：
.container {
/*省略部分代碼*/
grid-template:
"header header header" 50px
". main aside" auto
"footer footer footer" 50px
/10% 200px 10%; /*這里將之前auto改成200px*/
}
當(dāng)justify-content值為center時促脉，其他值自己測試辰斋。
（7）grid用法
grid是其他以grid開頭的所有集合縮寫，用法和grid-template差不多
例如
.container {
/*省略部分代碼*/
grid-template:
"header header header" 50px
". main aside" auto
"footer footer footer" 50px
/10% auto 10%;
}
改成grid
.container {
/*省略部分代碼*/
grid:
"header header header" 50px
". main aside" auto
"footer footer footer" 50px
/10% auto 10%;
}
其他寫法
.container {
grid:50px auto 50px/10% auto 10%; /*column/row*/
}
2瘸味、grid items的屬性：
grid-column-start / grid-column-end / grid-row-start /grid-row-end使用特定的網(wǎng)格線確定 grid item 在網(wǎng)格內(nèi)的位置宫仗。grid-column-start/grid-row-start 屬性表示grid item的網(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)格線
auto: 自動布局枯冈， 或者自動跨越毅贮， 或者跨越一個默認(rèn)的軌道
舉例子：
（1）用每個行和列的名字進(jìn)行定位（名字需要自己進(jìn)行定義）
.item-1 {
grid-column-start: line-2;
grid-column-end: line-4;
grid-row-start: row-3;
grid-row-end: row-4;
}
（2）每個行和列數(shù)字進(jìn)行定位
.item-1 {
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end:4;
}
這種方法可以簡寫成這種形式（建議以后用這種方法使用）
.item-1 {
grid-column: 2 / 4; /* grid-column: 2 / span 2 */
grid-row: 3 / 4;
}
說明：grid-column / grid-row是grid-column-start + grid-column-end, 和 grid-row-start + grid-row-end 的簡寫形式。
注意這里 grid-column: 2 / 4可以改成grid-column: 2 / span 2 這里的意思是span表示從2開始往后跨度為2
總結(jié)：給 grid item 進(jìn)行定位可以使用grid-template-areas+grid-area創(chuàng)建尘奏。另外也可以使用grid-column +grid-row進(jìn)行定位滩褥。
3、總結(jié)girdle布局
前面說了一堆特性和用法炫加，都是幫助你理解grid布局瑰煎，最后這個例子你記住怎么用就行，就學(xué)會grid布局了俗孝。同時grid布局里面可以嵌套grid布局酒甸，或者flex布局完成其他一些細(xì)節(jié)功能。
HTML
<div class="container">
<div class="header">header</div>
<div class="main">main</div>
<div class="aside">aside</div>
<div class="footer">footer</div>
</div>
CSS
.container{
width:400px;
height:300px;
border:1px solid red;
display:grid;
grid:50px auto 50px/10% auto 10%
}
.header{
grid-column:1/4;
grid-row:1/2;
background:red;
}
.main{
grid-column:2/3;
grid-row:2/3;
background:blue;
}
.aside{
grid-column:3/4;
grid-row:2/3;
background:yellow;
}
.footer{
grid-column:1/4;
grid-row:3/4;
background:grey;
}
