以前布局，有一个东西叫做文档流，也就是说页面其实是从上到下从左到右一点一点堆积起来的。不过有了grid之后这个情况将会发生改变，如果说以前的文档流布局是一维布局的话，那么grid我们可以把它理解成二维布局。
首先，grid的基本概念其实就是在父元素身上挖坑，然后用子元素去填。
1. 创建单元格
1.1 基础属性
通过将元素的父级设置display: grid;转化为网格布局。
<div class="box">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
.box{
display: grid;
}
1.2设置行 列
grid-tamplate-columns 用来规定把父级的空间分割成多少列以及每一列的宽度，属性的参数数量就是划分为具体的多少列
.box{
display: grid;
grid-template-columns: 100px 200px 150px;
}
.box{
display: grid;
grid-template-columns: 100px 50% 150px;
}
这里是为了设置子元素的宽度，可以用百分比，也可以使用其他的单位。只要是宽度可以用的值在这里都是可以使用的。
grid-template-rows，原理和columns 一样,设置每一行的高度
.box{
display: grid;
grid-template-columns: 100px 200px 150px;
grid-template-rows: 50px 100px;
}
综合写法：grid-template
grid-template：<‘grid-template-rows’> / <‘grid-template-columns’>
.box{
display: grid;
grid-template: 50px 100px /80px 50% 150px;
}
1.3 特殊单位： fr
它是一个相对单位。
比如上面grid-template-columns的值也可以这样设置： grid-template-columns：1fr 1fr 1fr; 这样便是把box分成了三列，并且每一列的宽度都占box宽度的3分之一，
为什么是三分之一呢？ 因为有3个fr。
.box{
display: grid;
grid-template-rows: 1fr 1fr ;
grid-template-columns: 1fr 1fr 1fr;
/* grid-template: 1fr 1fr /1fr 1fr 1fr; */
}
1.4重复值函数： repeat
利用repeat函数来创建多个重复的列
repeat(4, 1fr);第一个值是多少列 第二个值是每一列的宽度
.box{
display: grid;
/* grid-template-rows: 1fr 1fr ;*/
/* grid-template-columns: 1fr 1fr 1fr; */
grid-template: repeat(2, 1fr) /repeat(3, 1fr);
}
1.5 auto-fill关键字
有时，单元格的大小是固定的，但是父级的大小不确定，如果希望父级每一行或每一列容纳尽可能多的单元格，这时可以使用 auto-fill 关键字表示自动填充
.box{
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
}
1.6 auto 关键字
auto 关键字表示浏览器自己决定宽度或者高度
.box{
display: grid;
grid-template-columns: 100px auto 100px;
}
1.7grid-auto-columns属性和 grid-auto-rows属性
用于设置网格之外的元素的宽高
.box{
display: grid;
grid-template: repeat(2, 1fr) /repeat(3, 1fr);
}
2. 单元格合并
概念：网格线
记住上图，再往下看：
合并列：
grid-column-start: 1;开始合并的列 从父级最左边开始算 如果有四列子元素，那么父级的最右边是5
grid-column-end: 4;结束合并的列
综合：grid-column: 2 / 4;开始合并的列和结束合并的列
合并行：
grid-row-start: 1;开始合并的行
grid-row-end: 4;结束合并的列
grid-row: 2 / 4;开始合并的列和结束合并的列
<div class="box">
<div class="item" data-num="1"></div>
<div class="item" data-num="2"></div>
<div class="item" data-num="3"></div>
<div class="item" data-num="4"></div>
<div class="item" data-num="5"></div>
<div class="item" data-num="6"></div>
<div class="item" data-num="7"></div>
<div class="item" data-num="8"></div>
</div>
合并行
.item:nth-child(1){
grid-row-start:1;
grid-row-end: 3;
/* grid-row: 1/3; */
}
合并列
.item:nth-child(2){
grid-column-start:2;
grid-column-end:4;
}
.item:nth-child(2){
grid-column-start:2;
grid-column-end:4;
}
.item:nth-child(6){
grid-column-start:3;
grid-column-end:5;
}
改变位置
.item:nth-child(2){
grid-column-start:4;
grid-row-start:2;
}
Grid-template-areas属性（用命名的方式合并行与列）
网格布局允许指定"区域"（area），一个区域由单个或多个单元格组成。grid-template-areas属性用于定义区域。
.box{
display: grid;
grid-template-columns: repeat(4,100px);
grid-template-rows: repeat(3, 150px);
/*每一组命名用引号包裹起来，直接写一行也可*/
/*把要合并的起一样的名称*/
grid-template-areas: 'left a b c'
'left r e e';
}
.item:nth-child(1){
grid-area: left;
}
.item:nth-child(6){
grid-area: e;
}
3. 单元格对齐方式
justify-items 和 align-items 针对单行
justify-items: 调整子元素水平对齐方式（调整子元素在主轴方向上的对齐方式）
定义元素对齐方式：
start / end / center
<!-- 垂直对齐方式 -->
<div class="box">
<span class="item"></span>
</div>
.box{
width: 500px;
height: 300px;
border: 1px solid #1890ff;
display: grid;
justify-items: center;
align-items: center;
}
.item{
width: 150px;
height: 60px;
background: #1890ff;
}
justify-content 和 align-content 针对多行
定义元素对齐方式：
normal / start / end / center / space-around / space-between / space-evenly
合并：place-content <align-content><justify-content>
<div class="box">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
.box{
width: 850px;
height: 400px;
border: 1px solid #1890ff;
display: grid;
grid-template-columns: repeat(5, 110px);
grid-template-rows: repeat(2, 110px);
justify-content: center;
align-content: center;
grid-gap: 10px;
}
.item{
border: 1px solid #1890ff;
}
4.其他
grid-gap 用来创建行和列之间的空隙
接受两个值 第一个是行与行之间的间距 第二个是列与列之间的间距
如果只给一个值，那么行与列之间的间距是一样的
grid-row-gap
grid-column-gap
5.总结
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-template: 100px 100px / 100px;
grid-auto-columns: 300px;
grid-auto-rows: 400px;
//auto-fill:
grid-template-columns: repeat(auto-fill, 100px);
//单元格合并:(设置给子级)
grid-column-start:1;
grid-column-end:3;
grid-column:2/4;
grid-row-start:1;
grid-row-end:3;
grid-row:2/4;
//给区域命名:
grid-template-areas: 'a a a'
'd e f'
'd h i';
grid-area: a;（设置给子级）
//单元格排列
grid-auto-flow: column;
justify-content: space-around;
align-content: center;
justify-items: center;
align-items: start;
//间隙
grid-gap: 10px;
