可以使用place-content进行简写。先定义列方向在定义行方向

列轴方向的对齐方式

属性值的定义

属性值的定义

justify-content的7个属性值

justify-items 和 align-items 可以用 place-items （垂直，水平）简写；justify-content 和 align-content 可以用 place-content（垂直，水平） 简写。

stretch 和 start 的区别是，当grid-template-columns设置的列宽为auto时，前者会把item能有多宽就撑开多宽，后者相反，能挤多窄就挤成多窄。

space-around：会使容器左右两边有一点点等宽的外边距，为item列间隙的一半。

space-evenly：会使容器左右两边和列之间的间距等宽。

space-between：使得item间隙均等，容器外边缘无间隙。    

justify-items

行轴上的每个items内容对齐方式

stretch(默认值)/start/end/center

align-items

纵轴上的每个items内容对齐方式

stretch(默认值)/start/end/center

place-items align-items | justify-items简写

justify-content

设置网格容器内的网格沿行轴对齐网格的对齐方式

stretch(默认值)/start/end/center/space-around(等间隙，边缘间隙为中间间隙一半)/space-between（等间隙，无边缘）/space-evenly(包括边缘，等间隙)

align-content

设置网格容器内的网格沿纵轴对齐网格的对齐方式

stretch(默认值)/start/end/center

place-content align-content| justify-content简写

属性知 

space-around：在grid item之间设置均等宽度的空白间隙，

其外边缘消息大小未中间空白间隙宽度的一半

sapce-between:在grid item 之间设置均等宽度空白间隙，其外边缘无间隙 

space-evenly:在每个grid item 之间设置均等宽度的空白间隙，包括外边缘

属性值

start :网格与网格容器的左边对齐

end:网格与网格容器的右边对齐 

center:网格与网格容器的中间对齐

strech :调整grid item 的大小，r让宽度填充整个网格容器

justify-content设置网格容器内的王哥哥沿着行轴对齐王哥的对齐方式

.container{

justify-content:satart | end | center | strech | space-around | space-between | space-evenly;

}

justify-content:设置网格容器的网格沿着行轴（水平）对齐网格的对齐方式,，即网格与容器的对齐方式。

justify-content : start | end | center | stretch | space-around | space-betwwen | space-evenly

align-content : start | end | center | stretch | space-around | space-betwwen | space-evenly

space-content : start end  //先列后行 start--列属性值，end---行属性值。

start：网格与网格容器左端  /  顶部对齐

end：网格与网格容器右端  /  底部对齐

center：网格与网格容器的水平  /  垂直中间位置

stretch：调整grid item的大小，让宽度填充整网格个容器

space-around：在grid item之间设置均等宽度的空白间隙，其边缘间隙大小为中间空白间隙宽度的一半

space-between：在grid item之间设置均等宽度的空白间隙，其边缘间隙不存在

space-evenly：在每个grid item之间设置均等宽度的空白间隙，包括其边缘间隙

网格容器内的网格对齐问题：

justify-content：start/end/center/stretch/space-around/space-between/space-evenly;

align-content：start/end/center/stretch/space-around/space-between/space-evenly;

或

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

start：网格与网格容器左端  /  顶部对齐

end：网格与网格容器右端  /  底部对齐

center：网格与网格容器的水平  /  垂直中间位置

stretch：调整grid item的大小，让宽度填充整网格个容器

space-around：在grid item之间设置均等宽度的空白间隙，其边缘间隙大小为中间空白间隙宽度的一半

space-between：在grid item之间设置均等宽度的空白间隙，其边缘间隙不存在

space-evenly：在每个grid item之间设置均等宽度的空白间隙，包括其边缘间隙

1,justify-content

--设置网格容器内的所有网格沿着行轴的对齐方式

语法

justify-content: start |end |center | stretch |space-around | space-between | space-evenly;

2，align-content

1,justify-content

--设置网格容器内的所有网格沿着行轴的对齐方式

语法

justify-content: start |end |center | stretch |space-around | space-between | space-evenly;

2，align-content

--设置网格容器内所有网格在列轴上的对齐方式

语法

align-content: start | end | stretch | space-around（单元格与单元格之间的间隙是两端间隙的两倍） | space-between | space-evenly(两端的间隙和单元格与单元格之间的间隙一样)

简写

3，place-content

语法

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

justify-content——单元格沿行轴对齐，align-content——单元格沿垂直行轴方向对齐。

值：stretch（默认）、start、end、center、space-around、space-between、space-evenly。

合并：place-content: <align-content>  <justify-content>;