<div class="content">
  <header>
    <div>this is header</div>
  </header>
  <section class="grid">
        <div class="item-1">col 1</div>
        <div class="item-2">col 2</div>
        <div class="item-3">col 3</div>
        <div class="item-4">col 4</div>
        <div class="item-5">col 5</div>
        <div class="item-6">col 6</div>
        <div class="item-7">col 7</div>
        <div class="item-8">col 8</div>
        <div class="item-1">col 1</div>
        <div class="item-2">col 2</div>
        <div class="item-3">col 3</div>
        <div class="item-4">col 4</div>
  </section>
</div>
<span class="nope">🚫 &nbsp; Sorry, but CSS Grid is unsupported in your browser.</span>
body, div, html {
  margin: 0px;
  padding: 0px;
  background-color: #eee;
}
header {
  padding: 20px;
  text-align: center;
}
.grid {
  display: grid;
  height: 300px;
  grid-template-rows: [row1-start]
    20%
    [row1-end]
    40%
    [third-line]
    auto
    [last-line];
  grid-template-columns: repeat(3, 20% [row1-end]) 1fr;
}
.grid [class^=item] {
  font-size: 16px;
  padding: 10px;
}
.item-1 {
    background-color: aquamarine;
}
.item-2 {
    background-color: coral;
}
.item-3 {
    background-color: beige;
}
.item-4 {
    background-color: darkturquoise;
}
.item-5 {
    background-color: darkgray;
}
.item-6 {
    background-color: darkcyan;
}
.item-7 {
    background-color: darkseagreen;
}
.item-8 {
    background-color: blanchedalmond;
}

/* =======================================分割线 */
/* warn against lack of browser support */
.nope {
  display: block;
  color: white;
  background: orange;
  text-align: center;
  padding: 10px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

@supports (display: grid) {
  .nope {
    display: none;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.