使用place-items可以对行和列进行简写，此处写在前边的是列的定义，写在后面的是行的定义，只写一个就设置了两个

列项的对齐

如图，属性值的内容

行轴的对齐方式

items 属性

justify-items:start center end 

align-items:start center end 

place-items:center;

justify-items

沿着行轴对齐网格内的内容

.container{

justify-items:start | end | center | stretch;

}

网格项的对齐问题：

justify-items：start/end/center/stretch;

align-items：start/end/center/stretch;

或

place-items：center end；  //先列后行

start：内容与网格区域左端  /  顶部对齐

end：内容与网格区域右端  /  底部对齐

center：内容位于网格区域的水平  /  垂直中间位置

stretch：内容宽度占据整个网格区域空间（默认值）

1,justify-items

--沿着行轴对齐网格内的内容

语法

justify-items: start | end | center | stretch(默认值);

2,align-items

--沿着列轴对齐网格内的内容

语法

align-items:start | end | center | stretch(默认值);

3,place-items

语法

place-items:<align-items> <justify-items>;

justify-items——沿行轴对齐内容，align-items——垂直行轴内容对齐。

值，stretch（默认）、start、end、center。

合并写法：place-items: <align-items>  <justify-items>;