CSS grid布局

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. 有两种布局的方法

1. areas

grid-template-areas: "header header header"
                     ".      main   ."
                     "footer footer footer";

#header{
  grid-area: header;
}
#main{
  grid-area: main;
}
#footer{
  grid-area: footer;
}

2. 单个布局

.avatar{
  grid-column: 1;  //占第一列
  grid-row: 1 / span 2; //从第一行开始，总跨两行，也就是占一二行
}