如何在网格容器内的div中添加边框而不会弄乱结构？

Question

我正在使用网格来创建界面。在容器内部，我想要一个带有边框的包装器（div）。但是当我将网格项放在包装器中时，结构就会被破坏。如何在包装器内维护预期的结构？

没有包装器，具有所需的结构（底部的按钮尚未正确定位）：

不幸的是，这就是包装器的外观：

在这里，您可以看到jsFiddle！

HTML

 <div class="wrapper">
    <div class="col3r7">
      <label class="id">gggg</label>
    </div>
    <div class="col4r7">
      <label class="monkey">hhhhhhhh hhh hh</label>
    </div>
    <div class="col3r9">
      <label class="ape">iiiiiiL</label>
    </div>
    <div class="col3r11">
      <label class="bob">jjjjjj/kkkk</label>
    </div>
    <div class="col3r13">
      <label class="pepsi">lllll</label>
    </div>
    <div class="col3r15">
      <label class="cocacola">lllll</label>
    </div>
    <div class="col3r17">
      <label class="benice">nnnnns</label>
    </div>
    <div class="col3r19">
      <label class="tome">ooo pppp qqqqq]</label>
    </div>
    <div class="col3r21">
      <label class="many">rrrr rr rrrr</label>
    </div>
    <div class="col3r23">
      <label class="labels">ssss</label>
    </div>
    <div class="col4r25">
      <button class="done">ttttt</button>
    </div>
  </div>
</div>

CSS

.wrapper {
  grid-column-start: 3;
  grid-column-end: 7;
  grid-row-start: 6;
  grid-row-end: 25;
  border: 2px solid red;
}

.grid-container {
  display: inline-grid;
  height: 833vh;
  width: 100vw;
  grid-template-columns: 15.62vw 2.01vw 21.87vw 12.08vw 19.37vw 8.95vw 4.58% auto;
  grid-template-rows: 7.32vh 3.51vh 2.53vh 1.56vh 0.39vh 1.37vh 2.34vh 1.66vh 1.56vh 0.88vh 1.56vh 1.76vh 1.56vh 0.88vh 1.85vh 1.76vh 1.56vh 0.88vh 1.56vh 1.76vh 1.56vh 0.88vh 1.85vh 2.54vh 2.24vh 1.66vh;
  grid-template-areas: "sidebar head head head head head thinbar sidebar" "sidebar head head head head head thinbar sidebar" "sidebar main main main main main thinbar sidebar";
}

.col1r1 {
  grid-column-start: 1;
  grid-row-start: 1;
  grid-row-end: 3;
}

.col2r1 {
  grid-column-start: 2;
  grid-column-end: 8;
  grid-row-start: 1;
}

.col6r2 {
  grid-column-start: 6;
  grid-row-start: 2;
  grid-row-end: 2;
}

.col3r4 {
  grid-column-start: 3;
  grid-row-start: 4;
}

.col4r4 {
  grid-column-start: 4;
  grid-row-start: 4;
}

.col3r7 {
  grid-column-start: 3;
  grid-row-start: 7;
}

.col4r7 {
  grid-column-start: 4;
  grid-row-start: 7;
}

.col3r9 {
  grid-column-start: 3;
  grid-row-start: 9;
}

.col3r11 {
  grid-column-start: 3;
  grid-row-start: 11;
}

.col3r13 {
  grid-column-start: 3;
  grid-row-start: 13;
}

.col3r15 {
  grid-column-start: 3;
  grid-row-start: 15;
}

.col3r17 {
  grid-column-start: 3;
  grid-row-start: 17;
}

.col3r19 {
  grid-column-start: 3;
  grid-row-start: 19;
}

.col3r21 {
  grid-column-start: 3;
  grid-row-start: 21;
}

.col3r23 {
  grid-column-start: 3;
  grid-row-start: 23;
}

.col4r25 {
  grid-column-start: 4;
  grid-row-start: 25;
}

.col3r26 {
  grid-column-start: 3;
  grid-row-start: 26;
}

.done {
  height: 2.24vh;
  width: 3.33vw;
}