grid布局

在容器中使用display: grid，与flex相比，grid类似二维布局，而flex类似一维布局。
demo演示

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr; // 比例布局 当子元素没有设置宽度时可用，设置宽度时绝对大小仍有效，但column会炸
  grid-template-rows: 100px 200px; // 当子元素没有设置高度有效，设置高度比例和px都无效
  row-gap: 1px; // 行间距
  column-gap: 2px; // 列间距
  gap: 3px; // 统一间距
  align-items: center/end; // 垂直对齐
  justify-items: center/end/space-between; // 水平对齐
  // 当没超过容器大小时，可设置内容整体对齐
  align-content: center/end;
  justify-content: center/end/space-between;
  // 一种布局方式
  grid-template-areas: "header header header"
    "sidebar content content"
    "footer footer footer";
}
.header {
    grid-area: header;
    height: 300px;
    background-color: brown;
}
.sidebar {
    grid-area: sidebar;
    height: 300px;
    background-color: cadetblue;
}
.content {
    grid-area: content;
    height: 300px;
    background-color: chocolate;
}
.footer {
    grid-area: footer;
    height: 300px;
    background-color: cornflowerblue;
}