网格布局

容器属性

display:设置为网格布局;
        grid
        inline-grid

grid-template-columns:分列1 分列2 分列3;
grid-template-rows:分行1  分行2  分行3;
        px
        %
        fr 份数
        repeat(列数,大小)
        repeat(auto-fill,大小) 根据大小确定列数
        auto 自适应
        minmax(最小值,最大值)

grid-column-gap:列间距;
grid-row-gap:行间距;
grid-gap:行间距  列间距;
【注】新版已经省略grid- 前缀
        column-gap:列间距;
        row-gap:行间距;
        gap:行间距  列间距;

grid-template-areas: "分区1 分区2 分区3";
【注】分区只能分出矩形区
        需要结合项目属性调用: grid-area:调用分区;

justify-items:内容在单元格内部的水平对齐方式;
align-items:内容在单元格内部的垂直对齐方式;
综合写法: place-items:垂直  水平;
        start 起始位
        center 居中
        end 结束位
        stretch 拉伸

justify-content:网格整体在容器内的水平对齐方式;
align-content:网格整体在容器内的垂直对齐方式;
综合写法: place-content:垂直  水平;
        start 起始位
        center 居中
        end 结束位
        stretch 拉伸
        space-between 两端对齐
        space-around 两端平分
        space-evenly 平均分配

网格线名称:

        grid-template-columns:[1号线] 列宽 [2号线] 列宽 [3号线];
        grid-template-rows:[1号线] 行高 [2号线] 行高 [3号线];
        【注】结合项目属性使用

项目属性：

grid-area:调用分区;

grid-column-start:列起始线;
grid-column-end:列结束线;

grid-row-start:行起始线;
grid-row-end:行结束线;

综合写法:

        grid-column:列起始线/结束线;
        grid-row:行起始线/结束线;