父元素设置的属性

    1.display:grid/inline-grid 将父元素变成网格布局

    2.设置行和列的属性

    grid-template-colum： 数值/百分比 数值/百分比 数值/百分比 ； 数值有几个，表示有几列；

    grid-template-row:数值/百分比 数值/百分比 数值/百分比 ； 数值有几个，表示有几行

    除了百分比和数值，还可以用

    repeat（次数，模式）例如：

    repeat（3，30px）

    repeat（3，30px，20px）

    repeat（auto-fill，100px）

    fr 倍数关系

    minmax（a，b）最小、最大宽度

    auto 自动填充

    3.列间距和行间距

    row-gap 行间距

    colum-gap 列间距

    4、给单元格起名字，按从左到右，从上到下的顺序给每一个单元格取名字，每一行的单元格名字写在一个引号中，空格隔开，单元格可以用重复的名字，但是重复名字的单元格只能是矩形区域，父元素下的子元素如果用了重复的单元格名字，那么就会占据所有用这个名字的单元格区域；

    grid-template-areas:’ ‘ ‘ ‘ ‘ ‘;

    子元素中写

    grid-area：单元格名字

    项目的排列数序

    grid-auto-flow

    row 先行后列（默认）

    column 先列后行

    单元格的对齐方式(子元素在单元格中的对齐方式)

    水平对齐方式 justify-items： start end center stretch 拉伸（默认）

    垂直对齐方式 align-items： start end center stretch 拉伸（默认）

    复合写法 place-items：center center；（前面的属性值表示水平位置 后面的属性值表示垂直位置的，如果只写一个，那么表示两个位置都是这个属性值）

    单元格项目的对齐方式（单元格在整个网格布局中的对齐方式）

    水平对齐 justify-content：start end center stretch 拉伸（默认）space-between space-around space-evenly

    垂直对齐 align-content：start end center stretch 拉伸（默认）space-between space-around space-evenly