将CSS网格行划分为相等的大小

Question

如何将3列的CSS网格行划分为2个相等的大小？这是我的小提琴：

https://jsfiddle.net/251f04ts/3/

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-auto-rows: 50px;
}

.one {
  background-color: yellow;
}

.two {
  background-color: blue;
}

.three {
  background-color: purple;
}

.four {
  background-color: green;
  grid-column: 1/4;
}

.five {
  background-color: pink;
  grid-column: 1/3;
}

.six {
  background-color: gray;
  grid-column: 2/5;
}

<div class="wrapper">

  <div class="one">
    one
  </div>
  <div class="two">
    two
  </div>
  <div class="three">
    three
  </div>
  <div class="four">
    four
  </div>
  <div class="five">
    five - this and six should be equal
  </div>
  <div class="six">
    six
  </div>

</div>

Answer 1

将.wrapper_the_second放入您想要.five和.six的行中。

.wrapper_the_second{
  grid-column: 1/4;

  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
  grid-auto-rows: 50px;
}

然后

.five {
  background-color: pink;
}

.six {
  background-color: gray;
}

这应该可以完成工作。

---

Jfiddle：https://jsfiddle.net/9e1naudg/