grid布局简单讲解

1、首先介绍最近学习的简写

.test{
  place-content: center;
  place-items: center;
}
/* 相当于 */
.test{
  align-content:center;　　// 垂直内容方向
  justify-content: center;　　// 水平内容方向
  
  align-items: center;　　// 　　align-self控制子元素的默认的这个属性
  justify-items: center;　　// justify-self控制子元素的默认这个属性
}

2、简单的垂直居中

.grid{
  display: grid;

  place-content: center;
}

3、简单的列分布

.grid{
  display: grid;

  grid-gap: 5px;    // 间距
  grid-template-columns: 50px 1fr;    // 每列分两个一个50px，另一个铺满
}

4、简单的行分布

.grid{
  display: grid;

  grid-gap: 5px;    // 间距
  grid-template-rows: 50px 1fr;    // 第一行50px，第二行铺满
}

5、复杂的布局例子

.grid{
  display: grid;
  height: 300px;

  grid-template-areas:　
  "header header header"
  "nav main aside"
  "footer footer footer";
}
header {
  grid-area: header;
}
main {
  grid-area: main;
}
nav {
  grid-area: nav;
}
aside {
  grid-area: aside;
}
footer {
  grid-area: footer;
}
@media screen and (max-width: 800px) {
  body {
      grid-template-areas:
          "header"
          "nav"
          "main"
          "aside"
          "footer";
  }
}