grid网格布局，子元素如何做到元素重叠效果？

<div class="grid">
  <div class="su">苏</div>
  <div class="nan">南</div>
  <div class="da">大</div>
  <div class="shu">叔</div>
  <div class="xie">写</div>
  <div class="bo">博</div>
  <div class="ke">客</div>
</div>
<style>
  .grid {
    display: grid;
    grid-template-areas:
      "su su nan nan"
      "su su nan nan"
      "da da shu shu"
      "da da shu shu";
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    grid-gap: 3px;
    width: 300px;
    height: 200px;
  }
  .grid > div {
    background: blue;
    color: white;
    font-size: 32px;
    text-align: center;
    vertical-align: middle;
  }
  .su {
    grid-area: su;
  }
  .nan {
    grid-area: nan;
  }
  .da {
    grid-area: da;
  }
  .shu {
    grid-area: shu;
  }
  .bo {
    grid-row: 2 / 4;
    grid-column: 2 / 4;
    border:1px solid red;
  }
  .ke {
    grid-row: shu-start / shu-end;
    grid-column: shu-start / shu-start;
    border:5px solid rgb(255, 136, 0);
  }
</style>