SOURCE

console 命令行工具 X clear

                    
>
console
<div class="wrapper">
  <div class="box a ">a</div>
  <div class=" box b">b</div>
  <div class=" box c">c</div>
</div>
.a {
  grid-area: a;
}

.b {
  grid-area: b;
}

.c {
  grid-area: c;
}


.wrapper {
  border: : 10px solid #fff;
  display: grid;
  grid-gap: 10px;
  grid-template-rows: repeat(3,100px);
  grid-template-columns: repeat(3,100px);	
  grid-template-areas: 
            "c . a"
            ". . a"
            "b b .";
  background-color: #fff;
  color: #444;
}
.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

.a {
  background-color: #999;
}
.b {
  background-color: #888;
}
.c {
  background-color: #777;
}