在讲解Grid布局之前，我们常见布局方式有以下几种
1、normal flow （正常流，也叫文档流）--内联元素从左往右排列，块级元素从上往下排列。
2、float+clear（浮动+清除）
3、position relative+absolute（绝对定位）
4、display inline-block （行向布局）
5、负margin
6、display:flex
Grid布局优点：这是一个二维布局系统，最大优点就是可以同时处理列和行，不像其他布局那样，主要是一维布局系统。Grid布局目前在很多浏览器都可以支持了，详细兼容情况去Caniuse查看。
由行和列组合包围的网格线叫grid item，由最外围的行和列的边框叫grid container。红色的123构成的是行分界线（row grid lines）、黑色的1234构成的是列分界线（column grid lines）
1、grid container的属性：
（1）、grid-template-columns 设置列
（2）、grid-template-rows 设置行
（3）、grid-template-areas 定位空间
（4）、grid-template （1）和（2）和（3）组合使用缩写
（5）、grid-column-gap 设置列间隙
（6）、grid-row-gap 设置行间隙
（7）、grid-gap （5）和（6）组合使用缩写
（8）、justify-items 设置水平对齐内容位置
（9）、align-items 设置垂直对齐内容位置
（10）、justify-content
（11）、align-content
（12）、grid-auto-columns 创建隐式网格（不讲，用的不多）
（13）、grid-auto-rows 创建隐式网格（不讲，用的不多）
（14）、grid-auto-flow 自动布局（不讲，用的不多）
（15）、grid
（1）利用grid-template-columns、grid-template-rows构建网格
HTML
<div class="container"></div>
CSS
.container{
width:400px;
height:300px;
border:1px solid red;
display:grid; /*grid布局*/
grid-template-columns:10% auto 10%; /*设置列*/
grid-template-rows:50px auto 50px; /*设置行*/
}
【1】、grid-template-columns:10% auto 10% 表示设置三列，第一列是父元素宽度10%，第二列是自动适应宽度，第三列是父元素宽度10%；另外一种写法：grid-template-columns：[colunms-1] 10% [colunms-2] auto [colunms-3] 10% 表示对每列起个名字，配合行方便后面放内容（名字随意）、后面介绍更简单方法直接用数字表示。
【2】、grid-template-rows:50px auto 50px 表示设置三行，第一行高度是50px,第二行高度是自适应高度，第三行高度是50px;另外一种写法：grid-template-rows:[row-1] 50px [row-2] auto [row-3] 50px表示对每行起个名字，配合列方便后面放内容（名字随意）、后面介绍更简单方法直接用数字表示。
【3】、“fr”单位允许您将轨道大小设置为网格容器自由空间的一部分。 例如，下面的代码会将每个 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名字匹配，从而为这些网格分配内容和位置。 点号表示一个空单元格。
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设置网格行和列的间隙
.container{
/*省略部分代码*/
grid-column-gap:10px;
grid-row-gap:10px;
}
注意：这里间隙可以用padding或者margin进行设置
【1】、grid-gap是grid-column-gap和grid-row-gap的缩写用法
.container {
/*省略部分代码*/
grid-gap: 10px 10px; /*第一个是row，第二个是column*/
}
（4）、justify-items
沿着行轴对齐网格内的内容（与之对应的是 align-items, 即沿着列轴对齐），该值适用于容器内的所有的 grid items。
值：
start: 内容与网格区域的左端对齐
end: 内容与网格区域的右端对齐
center: 内容位于网格区域的中间位置
stretch: 内容宽度占据整个网格区域空间(这是默认值)
举值为center例子，其他值情况可以自己测试一下
.container {
/*省略部分代码*/
justify-items: center;
}
给单个 grid item 设置justify-items属性（嵌套使用grid布局）
.container {
/*省略部分代码*/
}
.header{
grid-area:header;
background:red;
display:grid;
justify-items:center;
}
（5）、align-items
沿着列轴对齐grid item 里的内容（与之对应的是使用 justify-items 设置沿着行轴对齐），该值适用于容器内的所有 grid items。
值：
start: 内容与网格区域的顶端对齐
end: 内容与网格区域的底部对齐
center: 内容位于网格区域的垂直中心位置
stretch: 内容高度占据整个网格区域空间(这是默认值)
举值为center例子，其他值情况可以自己测试一下
.container {
/*省略部分代码*/
align-items:center;
}
给单个 grid item 设置 align-items属性（嵌套使用grid布局）
.container {
/*省略部分代码*/
}
.header{
grid-area:header;
background:red;
display:grid;
align-items:center;
}
（6）、justify-content（水平方向）、align-content（垂直方向）
有时，网格的总大小可能小于其网格容器的大小。如果你的所有 grid items 都使用像px这样的非弹性单位来设置大小，则可能发生这种情况。
值：
start - 网格与网格容器的左边对齐
end - 网格与网格容器的右边对齐
center - 网格与网格容器的中间对齐
stretch - 调整g rid item 的大小，让宽度填充整个网格容器
space-around - 在 grid item 之间设置均等宽度的空白间隙，其外边缘间隙大小为中间空白间隙宽度的一半
space-between - 在 grid item 之间设置均等宽度空白间隙，其外边缘无间隙
space-evenly - 在每个 grid item 之间设置均等宽度的空白间隙，包括外边缘
例如按照之前例子：
.container {
/*省略部分代码*/
grid-template:
"header header header" 50px
". main aside" auto
"footer footer footer" 50px
/10% 200px 10%; /*这里将之前auto改成200px*/
}
当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使用特定的网格线确定 grid item 在网格内的位置。grid-column-start/grid-row-start 属性表示grid item的网格线的起始位置，grid-column-end/grid-row-end属性表示网格项的网格线的终止位置。
值：
<line>: 可以是一个数字来指代相应编号的网格线，也可使用名称指代相应命名的网格线
span <number>: 网格项将跨越指定数量的网格轨道
span <name>: 网格项将跨越一些轨道，直到碰到指定命名的网格线
auto: 自动布局， 或者自动跨越， 或者跨越一个默认的轨道
举例子：
（1）用每个行和列的名字进行定位（名字需要自己进行定义）
.item-1 {
grid-column-start: line-2;
grid-column-end: line-4;
grid-row-start: row-3;
grid-row-end: row-4;
}
（2）每个行和列数字进行定位
.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
总结：给 grid item 进行定位可以使用grid-template-areas+grid-area创建。另外也可以使用grid-column +grid-row进行定位。
3、总结girdle布局
前面说了一堆特性和用法，都是帮助你理解grid布局，最后这个例子你记住怎么用就行，就学会grid布局了。同时grid布局里面可以嵌套grid布局，或者flex布局完成其他一些细节功能。
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;
}
