grid布局+常见居中方式_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;

整个网格的垂直对齐方式
align-content:center;

网格之间的间距
简写: gap:10px(行、列间距都为10px)
gap:20px(行间距为10px，列间距为20px)

子项单独的对齐方式
水平:justify-self:{start
center
end
stretch}

垂直:align-self:{start
center
end
stretch}

简写：place-self:start(垂直) center(水平)

加在子项身上的属性
.box div:nth-child(1){
垂直线第4个 grid-colum:1/4;
水平线第3个 grid-row:1/3;
}

元素居中的方式
第一种居中方式
.box1 {
position:relative;
}
.box1 .dv {
position:absolute;
left:50%;
top:50%;
margin-top:-75px;
margin-left:-75px;
}

第二种居中方式
.box1{position:relative;}
.box1 dv {
position:absolute;
left:0
right:0
top:0
bottom:0
margin:auto;
}

第三种居中方式
.box1{
display:flex;
justify-content:center;
align-items:center;
}

第四种居中的方式
.box {
width:600px;
position:relative;
}
.box .dv {
position:absolute;
left:50%;
top:50%;
tarnsform:tarnslate(-50%,-50%)
}

第五种居中方式
.box1{
display:grid;
place-items:center垂直 center水平
}