<div class="container">
  <h2>grid-template 同时声明 grid-template-rows、grid-template-columns</h2>
  <pre>grid-template: 100px 1fr / 50px 1fr
</pre>
  <article class="a1">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </article>
</div>

<div class="container">
  <h2>使用grid-template 定义 grid-template-areas</h2>
  <pre>
  grid-template: "header . ."
            ". main ."
            "footer footer .";
</pre>
  <article class="a2">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </article>
</div>

.container {
  box-sizing: border-box;
  background-color: #f1f1f1;
  margin: 10px 0;
  text-align: center;
  overflow: hidden;

  article {
    margin: 0 auto;
    width: 300px;
    height: 200px;
    border: solid 5px silver;
    display: grid;

    & > div {
      background: blueviolet;
      background-clip: content-box;
      padding: 10px;
      border: solid 1px #ddd;
    }
  }
  //   行高定义简写
  .a1 {
    grid-template: 100px 1fr / 50px 1fr;
    // equal
    // grid-template-rows: 100px 1fr;
    // grid-template-columns: 50px 1fr;
  }
  //   区域简写
  .a2 {
    width: 300px;
    height: 500px;
    grid-template:
      "header . ."
      ". main ."
      "footer footer .";
    & > div:nth-child(1) {
      background-color: orange;
      grid-area: header;
    }
    & > div:nth-child(2) {
      grid-area: main;
    }
    & > div:nth-child(3) {
      grid-area: footer;
    }
    & > div:nth-child(4) {
      background-color: yellow;
      grid-area: footer;
    }
  }
}