簡介
使用Gird的好處
1.布局清晰明了，擺脫了模板中使用不同標簽下基於浮動，定位的手動計算過程。
2.類似於talbe布局，不同點在於Gird在css中實現，而table在html中實現；同時gird可以根據媒體查詢定義不同的上下文，有利於網頁響應式設計。
3.擺脫傳統布局中文檔流的限制，這也意味着可以自由地更改頁面元素在html中的位置。
Gird在瀏覽器的兼容性
從圖上可以看出，支持Gird布局的瀏覽器並不多，IE10以上才支持部分屬性，如果想體驗Grid布局的強大，推薦使用開通過“體驗新功能”的Chrome, Opera 或 Firefox， Chrome:打開瀏覽器，輸入chrome://flags，找到”experimental web platform features”，啟用並重啟瀏覽器；Opera：輸入opera://flags，與Chrome一樣；Firefox:輸入layout.css.grid.enabled。
由於Gird兼容性和靈活性不是很高，這就造成了網站上的使用率並不高的原因，當然如果非要使用它又需要向后支持，我們可以利用@supports方法來漸進式增強。
Grid布局的示例源碼
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 6 <style> 7 * {margin: 0;padding: 0;} 8 html,body {width: 100%;height: 100%;} 9 .container { 10 display: grid; 11 grid-template-columns: 33.333333% 33.333333% 33.333333%; 12 grid-template-rows: auto; 13 } 14 .item { 15 background-color: #444; 16 color: #fff; 17 font-size: 150%; 18 padding: 20px; 19 margin: 3.333333%; 20 } 21 .item-5 { 22 grid-column-start: 2; 23 grid-column-end: 4; 24 grid-row-start: 2; 25 grid-row-end: 4; 26 } 27 .item-7 { 28 grid-column-start: 1; 29 grid-column-end: 3; 30 grid-row-start: 4; 31 grid-row-end: 4; 32 } 33 .item-12 { 34 grid-column-start: 1; 35 grid-column-end: 4; 36 grid-row-start: 6; 37 grid-row-end: 6; 38 } 39 </style> 40 </head> 41 <body> 42 43 <div class="container"> 44 <div class="item item-1">1</div> 45 <div class="item item-2">2</div> 46 <div class="item item-3">3</div> 47 <div class="item item-4">4</div> 48 <div class="item item-5">5</div> 49 <div class="item item-6">6</div> 50 <div class="item item-7">7</div> 51 <div class="item item-8">8</div> 52 <div class="item item-9">9</div> 53 <div class="item item-10">10</div> 54 <div class="item item-11">11</div> 55 <div class="item item-12">12</div> 56 </div> 57 </body> 58 </html>
效果如下：
源碼說明：
一、設置在網格容器上的屬性
1. display: grid | inline-grid | subgrid;
屬性值：
grid: 生成塊級網格
inline-grid: 生成行內網格
subgrid: 如果網格容器本身是網格項（嵌套網格容器），此屬性用來繼承其父網格容器的列、行大小。
注：當元素設置了網格布局，column、float、clear、vertical-align屬性無效。
2. grid-template-columns: <track-size> ... | <line-name> <track-size> ... ;
grid-template-rows: <track-size> ... | <line-name> <track-size> ... ;
設置行和列的大小，在行軌道或列軌道兩邊是網格線。
屬性值：
track-size: 軌道大小，可以使用css長度，百分比或用分數（用fr單位）。
line-name: 網格線名字，你可以選擇任何名字。
3.grid-template-areas
通過獲取網格項中的grid-area屬性值（名稱），來定義網格模版。重復網格區（grid-area）名稱將跨越網格單元格，‘.’代表空網格單元。
屬性值：
grid-area-name: 網格項的grid-area屬性值（名字）
‘.’ : 空網格單元
none: 不定義網格區域
4. grid-column-gap：<line-size>; 和 grid-row-gap: <line-size> ;
網格單元間距。
屬性值：
line-size: 網格線間距,設置單位值。
注：間隔僅僅作用在網格單元之間，不作用在容器邊緣。
5. grid-gap：<grid-column-gap> <grid-row-gap>;
是grid-column-gap 和 grid-row-gap簡寫，
注：如果只設置一個值，那么grid-column-gap 和 grid-row-gap都為那個值。
6. justify-items: start | end | center | stretch（默認） ;
垂直於列網格線對齊，適用於網格容器里的所有網格項。
屬性值
start: 左對齊。
end: 右對齊。
center: 居中對齊。
stretch: 填滿（默認）。
7. align-items: start | end | center | stretch ;
垂直於行網格線對齊，適用於網格容器里的所有網格項。
屬性值：
start： 頂部對齊。
end： 底部對齊。
center： 居中對齊。
stretch：填滿（默認）。
8. justify-content: start | end | center | stretch | space-around | space-between | space-evenly ;
如果用像px非彈性單位定義的話，總網格區域大小有可能小於網格容器，這時候你可以設置網格的對齊方式（垂直於列網格線對齊）。
屬性值：
start: 左對齊。
end: 右對齊。
center: 居中對齊。
stretch: 填滿網格容器。
space-around: 網格項兩邊間距相等，網格項之間間隔是單側的2倍。
space-between: 兩邊對齊，網格項之間間隔相等。
space-evenly: 網格項間隔相等。
如果用像px非彈性單位定義的話，總網格區域大小有可能小於網格容器，這時候你可以設置網格的對齊方式（垂直於行網格線對齊）。
屬性值：
start: 頂部對齊。
end: 底部對齊。
center: 居中對齊。
stretch: 填滿網格容器。
space-around: 網格項兩邊間距相等，網格項之間間隔是單側的2倍。
space-between: 兩邊對齊，網格項之間間隔相等。
space-evenly: 網格項間隔相等。
10. grid-auto-columns: <track-size> ... ; 和 grid-auto-rows: <track-size> ... ;
自動生成隱式網格軌道（列和行），當你定位網格項超出網格容器范圍時，將自動創建隱式網格軌道。
屬性值：
track-size: 網格軌道大小,可以是固定值，百分比或者是分數（fr單位）。
11. grid-auto-flow : row（默認） | column | dense ;
在沒有設置網格項的位置時，這個屬性控制網格項怎樣排列。
屬性值：
row: 按照行依次從左到右排列。
column: 按照列依次從上倒下排列。
dense: 按先后順序排列。
辦公資源網址導航 https://www.wode007.com
12. grid: none | <grid-template-rows> / <grid-template-columns> | <grid-auto-flow> [<grid-auto-rows> [ / <grid-auto-columns>] ];
是一種簡寫形式，設置網格容器所有屬性。
屬性值：
none: 設置為所有屬性的默認值。
<grid-template-rows> / <grid-template-columns>: 設置行和列的值，其他屬性為默認值。
<grid-auto-flow> [ <grid-auto-rows> [ / <grid-auto-columns>] ] : 設置網格自動流、網格自動行、網格自動列的值，其他未設置則為默認值。
二、設置在網格項上的屬性
1. 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 ;
通過網格線來定義網格項的位置。grid-column-start、grid-row-start定義網格項的開始位置，grid-column-end、grid-row-end定義網格項的結束位置。
屬性值：
line: 指定帶編號或者名字的網格線。
span <number>: 跨越軌道的數量。
span <name>: 跨越軌道直到對應名字的網格線。
auto: 自動展示位置，默認跨度為1。
注：如果未聲明grid-column-end或grid-row-end，默認將跨越一個軌道。項目也可以重疊，設置z-index來確定堆疊順序。
2. grid-column: <start-line> / <end-line> | <start-line> / span <value> ;
grid-row: <start-line> / <end-line> | <start-line> / span <value> ;
是 grid-column-start、grid-column-end 和 grid-row-start、grid-row-end 的簡寫。
3. grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end> ;
定義網格項名字，以便創建模塊（容器屬性grid-template-areas來定義模塊）。
屬性值：
name: 項目名子。
<row-start> / <column-start> / <row-end> / <column-end>: 可以是數字或網格線名字。
4. justify-self: justify-self: start | end | center | stretch;
定義單個網格項垂直於列網格線的對齊方式。
屬性值：
start: 網格區域左對齊。
end: 網格區域右對齊。
center: 網格區域居中。
stretch: 網格區域填滿。
提示：也可以在容器上設置justify-items，達到全部網格項對齊。
5. align-self: start | end | center | stretch;
定義單個網格項垂直於行網格線的對齊方式。
屬性值：
start: 網格區域頂部對齊。
end: 網格區域底部對齊。
center: 網格區域居中。
stretch: 網格區域填滿。