网格布局
网格布局在页面中更适合二维布局，将页面划分为多个区域，并且定义这些区域的大小、位置和层次等等这些关系。
特点：
1、在创建网格的时候，可以使用固定的轨道尺寸，为此有新的单位fr来创建有弹性尺寸的网格。也可以使用像素单位【fr是空间的一个等份单位】；
2、可以使用行号、行名称或者设置一个网格区域来精确定位元素。也可以使用一种算法来控制未给出明确网格位置的元素；
3、创建额外的轨道来包含元素【定义一个显示的网格，它会处理你添加在网格外面的内容，它会自动增加行和列，尽可能容纳所有的列】；
4、对齐控制；
5、控制重叠内容。
在元素声明display:grid或者display:inline-grid，将元素设置为网格容器，该容器内的子元素就成为了网格元素。
定义行和列
在将一个元素设置成为网格容器之后，那接下来就是如何将该容器划分为多少行和列了；
grid-template-columns：该属性将网格容器划分为多少列来显示，并可以定义每一列的宽度，如：
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>
css：
.container {
width: 600px;
border: 1px solid red;
display: grid;
grid-template-columns: 100px 100px 50px;
margin: 0 auto;
grid-gap: 20px;
}
.container div {
border: 1px solid blue;
}
如果设置列同样的宽度，则可以这样写：
grid-template-columns: repeat(2, 100px) 1fr;
同样，网格容器设置行宽度也是一样的语法。
grid-template-areas：用指定的网格区域名称来定义网格，使用grid-area定义区域名称。代码：
<div class="container">
<div class="test">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>
css：
.test {
grid-area: Div;
}
.container {
border: 1px solid red;
display: grid;
grid-template-areas: " Div Div . . . .";
margin: 0 auto;
}
.container div {
border: 1px solid blue;
text-align: center;
line-height: 200px;
}
以上三个属性简写为：grid-template，语法为：grid-template-areas grid-template-rows/grid-template-columns
网格（行与列）间隙
在网格容器中设置好行和列之后，行与行之间、列与列之间是紧凑一起的，以下属性可设置行或者列之间的间隙：
column-gap或者是grid-column-gap（这个是老版本的写法），这个属性设置列与列之间的间隙；
row-gap或者grid-row-gap，该属性设置行与行之间的间隙。
以上两个属性可以简写为：gap或者grid-gap，语法：grid-row-gap grid-column-gap
实例代码：
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>
css :
.container{
width: 900px;
border: 1px solid red;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px auto 50px;
grid-gap: 30px;
}
.container div{
border: 1px solid blue;
text-align: center;
line-height: 50px;
}
行、列对齐
主轴：规定子元素沿着某个方向排列，一般默认是水平方向；侧轴就是与主轴垂直的方向。
如上图所示，所有的列默认从左到右排列，所有的行是默认从上往下排列。关于设置网格容器元素对齐的属性：【center、end、start、stretch(是默认值，填充整个单元格)】
1、justify-items，设置网格元素在主轴上的的对齐方式；
2、align-items，设置网格元素在侧轴上的对齐方式；
当所有网格元素大小总和小于网格容器大小时，那么可以设置所有网格元素在容器内的对齐的方式：
1、justify-content，网格元素在水平方向上对齐；
2、align-content，网格元素在垂直方向上对齐。
以上的两个属性只有在所有子元素小于容器元素时才有效！！！
隐式网格和显示网格
当网格元素数量多于单元网格数量时，会自动创建隐式的轨道，这就是隐式网格
显式网格：使用grid-template-rows、grid-template-columns和grid-template-areas手动定义固定的网格线和网格轨道的grid，就是显式网格。
