Как добавить границу к div внутри grid-контейнера, не испортив структуру?

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;
}