利用 css grid 页面常规布局

Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。

Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。

 

HTML

<div class="grid-box">
  <div class="item header"></div>
  <div class="item header"></div>
  <div class="item header"></div>
  <div class="item sidebar"></div>
  <div class="item main"></div>
  <div class="item main"></div>
  <div class="item footer"></div>
  <div class="item footer"></div>
  <div class="item footer"></div>
</div>

CSS

.grid-box {
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(3, 33.3%);
  grid-template-rows:  100px 1fr 100px;
  grid-template-areas: 'header header header'
                       'sidebar main main'
                       'footer footer footer';
}

.item {
  background-color: aquamarine;
  border: 1px solid #eee;
  margin: 0 10px 20px 10px;
  margin-bottom: 20px;
  counter-increment: items;
  content: counter(items);
}

.header {
  grid-area: header;
}

.main {
  grid-area: main;
}

.sidebar {
  grid-area: sidebar;
}

.footer {
  grid-area: footer;
}