网格布局2

项目（内容）在单元格中的垂直、水平位置

justify-items 水平位置:内容相对于单元格左右对齐方式(通常项目内容大小小于单元格宽度时)

align-items 垂直位置:内容相对于单元格上下对齐方式(通常项目内容大小小于单元格高度时)

取值：start：对齐单元格的起始边缘。

end：对齐单元格的结束边缘。

center：单元格内部居中。

stretch：拉伸，占满单元格的整个宽度（默认值）

place-items属性是align-items属性和justify-items属性的合并简写形式。

place-items: 垂直 水平; 【空格隔开】

如果省略第二个值，则浏览器认为与第一个值相等。

给网格划分区域grid-template-areas

网格布局允许指定"区域"（area），一个区域由单个或多个单元格组成

取值：默认值：none；一个双引号一行，一个空格一列

grid-column-start属性：左边框所在的垂直网格线

grid-column-end属性：右边框所在的垂直网格线

grid-row-start属性：上边框所在的水平网格线

grid-row-end属性：下边框所在的水平网格线

简写：grid-column属性是grid-column-start和grid-column-end的合并简写形式  

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

    - 以斜杠分割  开始/结束 - 斜杠以及后面的部分可以省略，默认跨越一个网格。

注：如果项目指定的网格区域是重叠的可以使用z-index 进行调整层级

单独指定单元素格内容的对齐

justify-self属性设置单元格内容的水平位置（左中右）

align-self属性设置单元格内容的垂直位置（上中下）

- start：对齐单元格的起始边缘。

- end：对齐单元格的结束边缘。

- center：单元格内部居中。

- stretch：拉伸，占满单元格的整个宽度（默认值）

简写

- place-self属性是align-self属性和justify-self属性的合并简写形式。

- 如果省略第二个值，place-self属性会认为这两个值相等