通俗来讲Grid布局类似于一个表格（网格）布局，在一个容器（大的div）中依照自己的方式对各个小模块（子div）进行有序排版，与flex布局类似，但相比flex布局来说，grid布局更加简便。
注：左右可以分不清，行（横）和列（竖）不可以！
① 第一节点知识归纳：
display:grid;
grid-template-columns:第1列宽度 第2列宽度 第3列宽度 ...;
grid-template-rows:第1行高度 第2列高度 第3列高度 ...;
操作：
html代码：
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
css代码：
//容器样式
.container{
width:300px;
//重要的三行代码
display: grid;
grid-template-columns:100px 100px 100px;
grid-template-rows:100px 100px 100px;
}
//子模块样式
.box{
color:white;
line-height: 100px;
text-align: center;
font-weight: bold;
}
//子模块颜色：为了视觉区分
.box:nth-of-type(odd){
background:darkcyan;
}
.box:nth-of-type(even){
background:pink;
}
来看看效果：
解释：
这里你可以看到，通过代码（重要的那三行）我们将这形成了类似于一个表格的状态。
这里我们要注意的是：虽然效果与display：flex一样，但是在CSS样式中，没有给子模块（子div）设置宽高，却自动生成了宽高。
- display: grid：将容器形成grid布局。
- grid-template-columns:100px 100px 100px：设置容器中模块的列宽度，每列（每一竖列）都设置的为100px宽度。
- grid-template-rows:100px 100px 100px：设置容器中模块的行高度，每行（每一横行）都设置的为100px高度。
所以：该容器相当于形成了一个3 * 3的表格，当你不设置子模块宽高的时候，它会自动填满自己所占的区域（这就是单元格）。
这时候可能有人就会有很多大胆的猜测和想法：
想法1：虽然写了3个div，但如果只设置两个会怎样。如下：
.container{
grid-template-columns:100px 100px;
grid-template-rows:100px 100px;
}
效果：
解释：当你设置表格为2 * 2时候，多的div就会自动往下排列了，同时自动撑开自己所占的区域。
②第二节点知识归纳：
grid-template-columns:第1模块列所占百分比 第2模列块所占半分比 ...;
grid-template-rows:第1模块行所占百分比 第2模块行所占百分比 ...;
grid-template-columns:repeat(重复次数,模块列宽 模块列宽..);
grid-template0-rows:repeat(重复次数,模块行高 模块行高...);
grid-template-columns:repeat(auto-fill,模块列宽);
grid-template-rows:repeat(auto-fill,模块行高);
grid-template-columns:1fr 2fr 1fr 2fr;
grid-template-roes:1fr 2fr 1fr 2fr;
这一节点主要是讲述的这两个属性的各种写法：
第一种（百分比写法）：
html代码：
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
css代码：
//颜色代码省略...，上主代码
.container{
height:400px;
display:grid;
grid-template-columns:33% 33% 33%;
grid-template-rows:33% 33% 33%;
}
这里我没有设置容器的宽度，只设置了高度（设置了宽度效果与第一节点类似，没啥看头）。这里的容器宽度就默认为100%，这样会使该布局成为弹性的。
第二种（简单写法）：
有的人发问：总不能说有多少个子模块就需要在grid-template-columns:设置多少次吧？如下：
html代码：
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
css代码：
//颜色代码省略...上主要代码：
.container{
width:500px;
display:grid;
grid-template-columns:repeat(2,100px 150px);
grid-template-rows:repeat(2,150px 150px);
}
效果如下：
第三种（自适应重复次数）：
html代码：
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
css代码：
//颜色代码省略...上主要代码：
.container{
width:500px;
display:grid;
grid-template-columns:repeat(auto-fill,100px 150px);
grid-template-rows:repeat(auto-fill,100px);
}
效果如下：
完全自适应列和行，没有多余的网格。
第四种（相当于百分比分布）：
html代码：
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
css代码：
//颜色代码省略...上主要代码：
.container{
width:500px;
display:grid;
grid-template-columns:1fr 2fr 1fr 2fr;
grid-template-rows:1fr 2fr 1fr 2fr;
}
效果如下：
解释：fr可以理解为一个倍数，相当于flex布局后flex:倍数;上图中可以说将500px分为了6分=份，各占了：1份 2份 1份 2份。
当然fr可以与px混合使用：
.container{
width:500px;
display:grid;
grid-template-columns:200px 100px 1fr 2fr;
grid-template-rows:repeat(auto-fill,100px);
}
效果：
解释：除模块1和模块2加起来的300px外，将剩余的200px分成了三份，模块3占1份，模块4占2份。
后续......
