理解css中Grid布局，在项目中如何实现grid页面布局
简介
使用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: 网格区域填满。
