大飞

display: grid;

#行列
grid-template-columns 属性定义每一列的列宽
grid-template-rows 属性定义每一行的行高

#行列间距
grid-row-gap 属性设置行与行的间隔（行间距）
grid-column-gap 属性属性设置列与列的间隔（列间距）
grid-gap 属性是grid-column-gap和grid-row-gap的合并简写形式

#区域
grid-template-areas 属性用于定义区域

#网格顺序
grid-auto-flow 属性决定:先行后列 还是 先列后行

#单元格顺序
justify-items 属性设置单元格内容的水平位置（左中右）
align-items 属性设置单元格内容的垂直位置（上中下）
place-items 属性是align-items属性和justify-items属性的合并简写形式。

#内容区域在容器顺序
justify-content 属性是整个内容区域在容器里面的水平位置（左中右）
align-content 属性是整个内容区域的垂直位置（上中下）
place-content 属性是align-content属性和justify-content属性的合并简写形式

#多余的网格
grid-auto-columns 属性用来设置，浏览器自动创建的多余网格的列宽
grid-auto-rows 属性用来设置，浏览器自动创建的多余网格的行高

#简写属性
grid-template 属性，
grid 属性
简写属性,不方便阅读,不在详细介绍

/**
    grid-template属性是
    grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式。

    grid属性是
    grid-template-rows、grid-template-columns、grid-template-areas、
    grid-auto-rows、grid-auto-columns、grid-auto-flow
    这六个属性的合并简写形式。
    从易读易写的角度考虑，还是建议不要合并属性，所以这里就不详细介绍这两个属性了。
*/

#项目的位置(四个边框)
grid-column-start 属性：左边框所在的垂直网格线
grid-column-end 属性：右边框所在的垂直网格线
grid-row-start 属性：上边框所在的水平网格线
grid-row-end 属性：下边框所在的水平网格线

#xxx
grid-column 属性是grid-column-start和grid-column-end的合并简写形式
grid-row 属性是grid-row-start属性和grid-row-end的合并简写形式。

#项目放在哪一个区域
grid-area 属性指定项目放在哪一个区域

#单元格顺序
justify-self 属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目。
align-self 属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目。
place-self 属性是align-self属性和justify-self属性的合并简写形式。