grid布局+常见居中方式

grid 二维布局 网格布局
.bx {
display:grid}
可以以px,百分比，fr为单位
repeat() 第一个值是重复多少次，第二个值是要重复的值，用逗号隔开。
1)重复 grid-template-columns:1fr 2fr 3fr
2)水平 grid-template-rows: repeat(3,1fr);（等同于1fr 1fr 1fr）

area区域
3)划分 grid-template-areas 划分区域,grid的子项要用"grid-area"来指定区域
例:grid-template-areas:
"a1 a2 a3 a3 "
“a4 a5 a6 a7”
“a8 a9 a10 a11”
.box div:nth-child(2){
grid-area:a3;
}
grid-template:是1)重复2)水平3)划分的简写形式

当确定了水平、垂直的区域后，可以根据网格线对元素的位置进行调整
grid-template-colums:repeat(3，1fr)
grid-template-rows:repeat(3，1fr)
.box div:nth-child(2){
grid-area:3/3/3/4;
}
元素在网格里面的水平对齐方式
justify-items:start/center/end/stretch

元素在网格里面的垂直对齐方式
align-items:start/center/end/stretch

整个网格的水平对齐方式
justify-content:center;

整个网格的垂直对齐方