网格布局
display：grid块级网格
display：inline-grid行内块级网格
固定值
grid-template-rows: 200px 200px 200px;
（三行）行数（想要增加行数继续加像素）
grid-template-columns: 200px 200px 200px;
（三列）列数（想要增加列数继续加像素）
百分比
grid-template-rows: 25% 25% 25% 25%;
（四行）（想要增加行数改变百分比）
grid-template-columns: 25% 25% 25% 25%;
（四列）（想要增加列数改变百分比）
repeat（函数）
grid-template-rows:repeat(3,33.33%);
（三行）（重复三次33.33%)
grid-template-columns:repeat(3,33.33%)；
（三列）（重复三次33.33%）
repeat autofill（函数）
grid-template-rows:repeat(auto-fill,33.33%);（也支持像素）
（三行）（跟随百分数自动划分）（百分之二十就自动划分五行）
grid-template-columns:repeat(auto-fill,33.33%);（也支持像素）
（三列）（跟随百分数自动划分）（百分之二十五就自动划分四列）
fr 片段
grid-template-rows:1fr 1fr 1fr;
（三行）（等分）
grid-template-columns:1fr 1fr 1fr；
（三列）（等分）
minmax（函数）
grid-template-rows:minmax(100px,200px) 200px 100px;
（三行）（最小值100px）（括号外的值在大也会占100px高度）
（最大值200px）（括号外的值在小也只占200px高度）
grid-template-columns:minmax(100px,200px)200px 100px；
（三列）（最小值100px）（括号外的值在大也会占100px宽度）
（最大值200px）（括号外的值在小也只占200px宽度）
auto
grid-template-rows:100px auto 200px 100px;
（四行）（三个行数 数值固定 auto填满剩余空间）
grid-template-columns:100px auto 200px 100px;
（四列）（三个列数 数值固定 auto填满剩余空间）
列间距
grid-row-gap: 20px;
（行间距20px）
grid-column-gap: 20px;
（列间距20px）
grid-gap：20px 20px；
（合并写法）
新版中可以省略grid
区域命名与合并
grid-template-areas: 'a b c'
'd e e'
'g h i'；
（给区域命名，名字随便）
grid-area:e；
（合并要把两个区域改成相同的名字）
对齐方式
改变顺序方向
grid-auto-flow: row;
row是默认，column是竖着
单元格项目对齐
justify-content: center;
center水平居中， space-around自身左右两边相等，space-between两端对齐方式
align-content: center;
center垂直居中，space-around自身左右两边相等，space-between两端对齐方式
place-content：center center；
水平垂直居中
网格项目对齐
justify-items: center;
center网格内垂直居中
align-items: center;
center网格内垂直居中
place-items：center center；
水平垂直居中
项目属性
网格合并
grid-column-start: 1;（从第一条水平网格线开始合并）
grid-column-end: 3;（从第三条水平网格线结束合并）
grid-column:1/3 ;（用处是前两个的合并写起来更简洁）
grid-row-start: 1;（从第一条垂直网格线开始合并）
grid-row-end: 3;（从第三条垂直网格线结束合并）
grid-row:1/3 ;（用处是前两个的合并写起来更简洁）