网格布局的声明:

display:grid/inline-grid;
[会把元素转换为块元素/行内元素]

划分行和列：

划分行：grid-template-rows: val val ...;
划分列：grid-template-columns: val val ...;
[val值的个数表示行数]

其他的划分方式： [以划分行为例]

1. 百分比：grid-template-rows: 10% 20% 30% 20% 20%;

2. 重复repeat：grid-template-rows: repeat(n, val);
   [n取值为份数，val可取具体像素值，百分比]

3. 自动划分auto-fill:grid-template-rows: repeat(auto-fill, 20%);
   [配合repeat使用]

4. 分数 fr：grid-template-rows: 1fr 3fr 1fr;
   [将父元素的高分为1+3+1份 3行 第一行占1份 第二行占3份 第三行占1份]

5. 自动填充(剩余空间) auto:grid-template-rows:30px auto 20px;

6. 使用最小值和最大值定义最后一行 minmax:
   grid-template-rows:100px 150px minmax(100px, 150px);
   [①若剩余距离小于最小值，则使用最小值作为单元格的高]
   [②若剩余距离大于最大值，则使用最大值作为单元格的高]
   [③若剩余距离大于最小值，且小于最大值，则使用剩余空间作为单元格的高]
   [***前两种情况均可能出现单元格超出父元素的现象]

指定单元格之间的间距

设置行间距：grid-row-gap: val;
设置列间距：grid-column-gap: val;
复合写法：grid-gap: val(row) val(col);

指定子元素排列的方向

指定子元素排列的方向:grid-auto-flow:column | row
    [默认值为row]

指定网格在容器中的对齐方式

水平对齐方式：
justify-content:start | end | center | stretch | space-around | space-between | space-evenly;
垂直对齐方式：
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
复合写法：place-content: 垂直对齐方式 水平对齐方式
    [space-evenly:网格与网格间、网格与边框间的间距相等，对标 space-around]

指定内容在单元格内的对齐方式

水平对齐方式：justify-items:start | end | strech;
垂直对齐方式：align-items: start | end | center | stretch;
    [若项目没有设置宽高，则默认适用 justify-items:stretch]
复合写法：place-items:垂直对齐方式 水平对齐方式;

指定网格线名称

    [假定为3x3的网格]
垂直网格线：grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
水平网格线：grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
    [默认名称为1,2,3,4(-4,-3,-2,-1) 且不会被覆盖]

合并单元格

合并列：
grid-column-start: 合并起点的纵向网格线名称;
grid-column-end: 合并终点的纵向网格线名称;
合并行：
grid-row-start: 合并起点的纵向网格线名称;
grid-row-end: 合并终点的纵向网格线名称;
复合写法：
合并列：grid-column:start/end
合并行：grid-row:start/end

指定网格区域 分配项目

    [假定为3x3的网格]
指定网格区域：

grid-template-areas:'a a c'
                    '. e f'
                    '. . .';

    [单引号、双引号皆可]
    [区域名称可单行显示也可折行显示]
    [无用区域可用.来表示]

分配项目：grid-area:区域名称;
    [若指定区域为复数且相邻为长方形或正方形时，会自动合并]
    [指定时区域名称不用引号]