grid网格布局总结_grid-area: event / event / event / event;

grid网格布局
diaplay：；
grid
inline-grid

容器（父元素）属性：
划分行：
grid-template-rows
单位：
px
%
fr
重复：repeat（行数，fr）
划分列：
grid-template-columns
单位：
px
%
fr
重复：repeat（列数，fr）
综合写法：grid-template：repeat（行数，fr）/repeat（列数，fr）

    grid-template-areas:
        "区域1 区域2 区域3"(单引号 双引号 都可以)
        "区域1 区域4 区域5";
    注意：必须分了行和列，子元素占区域时，需要结合项目属性grid-area：区域名字；
    
    综合写法：grid-template："分区" "分区" "分区" 分行/分列；
            例子：
                "a1 a2 a3 1fr"
                "a1 a2 a3 1fr"
                "a1 a2 a3 1fr/1fr 1fr 1fr"

行间距：grid-row-gap：；
列间距：grid-column-gap：；
综合写法：grid-gap：行间距 列间距；（只写一个值，行间距与列间距一样）
注意：间距不会撑大父元素，而会使子元素之间自动分配压缩大小

网格整体水平位置
    justify-content：；
    start 起始位置
    end 结束位置
    center 居中
    strench 默认值，项目没有指定大小，拉伸占据整个网格大小
    space-around 两端平分
    space-between 两端对齐
    space-enenly 平均分配剩余空间

网格整体垂直位置
    align-content：；
    start 起始位置
    end 结束位置
    center 居中
    strench 默认值，项目没有指定大小，拉伸占据整个网格大小

综合写法 place-content：垂直位置 水平位置；


指定网格的垂直水平呈现方式
    align-items
    justify-items
        start 起始位置
        end 结束位置
        center 居中
        strench 默认值，项目没有指定大小，拉伸占据整个网格大小
    综合写法 place-items：垂直位置 水平位置；
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

项目（子元素）属性
grid-area：划分区域 注：需要分区才可以使用
方式一：
grid-area:“a1”
方式二：
grid-area：行起点/列起点/行结束/列结束；（利用网格线序号）

grid-row-start 行线开始数
grid-row-end   行线结束数
grid-column-start 列线开始数
grid-column-end 列线结束数

只有end才有span  意思是占几个网格 3指3个 
grid-column-end：span 3；
grid-row-end：span 2；


单个元素在网格的垂直 水平对齐方式
    align-self：；
    justify-self：；
        start 起始位置
        end 结束位置
        center 居中
        strench 默认值，项目没有指定大小，拉伸占据整个网格大小
    综合写法 place-self：垂直位置 水平位置；
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18