grid布局： 基于网格的2维布局方法
1：display: grid | inline-grid | subgrid
作用：启用网格grid容器
grid：定义一个块级的网格容器
inline-grid：定义一个内联的网格容器
subgrid：定义一个继承其父级网格容器的行和列的大小的网格容器，它是其父级网格容器的一个子项。
2:网格系统的属性
（1）：grid-template-columns/grid-template-rows
grid-template-columns 列宽(值得个数决定了列数)
grid-template-rows 行高（值得个数决定了行数）
设置方法：
a:
(创建三行三列的网格结构，值也可以设置auto自动分配剩余)
grid-template-columns:33.33% 33.33% 33.33%
grid-template-rows:33.33% 33.33% 33.33%
b:
repeat(3,33.33%)方法设置相同的值
grid-template-columns:repeat(3,33.33%)
grid-template-rows:repeat(3,33.33%)
c:
可以添加名称：
grid-template-columns:[line1] 25% [line2] auto [line3] 25% [line4]
grid-template-rows:[row1] 25% [row2] auto [row3] 25% [row4]
如图
d:
1fr 每个网格所占份数
grid-template-columns:1fr 1fr 1fr
grid-template-rows:1fr 1fr 1fr
（2）：grid-template-areas
作用：grid-template-areas可以配合grid-area定义一个显式的网格区域。grid-template-areas定义网格区域，然后使用grid-area调用声明好的网格区域名称来放置对应的网格项目。 .代表一个空的网格单元
例子：
<section>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
</section>
section{
display:grid;
background:pink;
grid-template-columns:repeat(4,1fr);
grid-template-rows:(3,1fr);
grid-template-areas: "header header header header"
"nav . . aside"
"footer footer footer footer"
}
.wrap1{
grid-area: header;
background:#f00;
}
.wrap2{
grid-area: nav;
background:#dd0;
}
.wrap3{
grid-area: aside;
background:#0dd;
}
.wrap4{
grid-area: footer;
background:#000;
}
效果如图：
（3）：grid-column-gap/grid-row-gap/grid-gap
作用：指定网格线的大小，也可以说是网格子项之间的间距
grid-gap是grid-column-gap和grid-row-gap的简称
eg:
grid-gap:10px
图示：
（4）：justify-items/align-items
属性值：
start：内容和网格区域的左边对齐
end：内容和网格区域的右边对齐
center：内容和网格区域的中间对齐
stretch：填充整个网格区域的宽度（默认值）
justify-items：让网格子项的内容和列轴对齐
align-items：让网格子项的内容和行轴对齐，这个值对容器里面的所有网格子项都有用
eg:
justify-items: center;
align-items:center;
图示：
（4）justify-content/align-content
属性值
start:左对齐
end：右对齐
center：居中对齐
stretch：填充网格容器
space-around：在每个网格子项中间放置均等的空间，在始末两端只有一半大小
space-between：两边对齐，在每个网格子项中间放置均等的空间，在始末两端没有空间
space-evenly：网格间隔相等，包括始末两端
说明：当网格子项非弹性单位，例如每个格子的宽是px单位，控制网格子项在网格系统里面的对齐方式。
justify-content 列网格线对齐
align-content 行网格线对齐
（5）grid-auto-columns/grid-auto-rows
作用：设置隐式网格轨道的列宽和行高。
隐式网格：当你定位网格项超出网格容器范围时，将自动创建隐式网格轨道。
怎么创建隐式网格：接触两个新属性（放在网格元素上） 》
grid-column / grid-row
eg：
grid-column ：2/3 把当前的元素放在第2列网格线开始到第三列网格线之间。
gird-row：1/2 把当前元素放在第1行网格线开始到第2行网格线之间。
代码示例：
<section>
<div >1</div>
<div >2</div>
<div >3</div>
</section>
section{
background:pink;
display:grid;
}
div{
border:1px solid #d00;
}
.con1{
grid-column: 2/3;
grid-row: 2/3
}
.con2{
grid-column: 6/7;
grid-row: 1/2;
}
.con3{
grid-column: 6/7;
grid-row:2/3;
}
注：以上案例则创建了一个2行6列的网格系统。分别把网格内的元素放在网格不同的位置。
（位置：类似几行几列 grid-column控制放在第几列，grid-row控制放在第几行）
grid-auto-columns/grid-auto-rows则是控制自动创建出来的网格的列宽和行高。
eg:
grid-auto-columns: 60px;
grid-auto-rows:100px;
（5）grid-auto-flow:
作用：当网格系统中没有设置网格内的元素固定在某个位置的时候，grid-auto-flow可以自动去排列位置：
属性值：
row 按照行横向进行排列
column 按照列纵向进行排列
row dense 在行内按照元素的先后顺序进行排列
column dense 在列内按照元素的先后顺序排列
eg:
<section>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</section>
div:nth-child(2){
grid-column:4/5;
grid-row:2/3;
}
注:给第2个元素设置了位置。其他元素的排列按照grid-auto-flow设置进行排列。
（6）：justify-self/align-self
和justify-items/align-items的作用一样。区别：justify-items/align-items控制的是整个网格系统内的所用元素的对齐方式。而justify-self/align-self则是添加在网格系统中的某一个元素上面，仅对当前的元素起作用。