1. 一种新的布局方式（网格）
在父元素里写display: grid;，这个元素就会成为一个网格
grid: auto 1fr auto / 12% auto 12%;
意思是分为三行三列，1fr的意思就是第二行尽量扩展，第一列和第三列分别占12%的宽度
justify-content: center;
align-content: center;
//子元素居中
justify-self: center;
align-self: center;
2. 有两种布局的方法
- areas
grid-template-areas: "header header header"
". main ."
"footer footer footer";
#header{
grid-area: header;
}
#main{
grid-area: main;
}
#footer{
grid-area: footer;
}
- 单个布局
.avatar{
grid-column: 1; //占第一列
grid-row: 1 / span 2; //从第一行开始，总跨两行，也就是占一二行
}
