我的内容重叠了。我知道这是因为我放置了相同的col-start，但是我如何让内容div增长并在CSS网格的中间运行呢？我应该使用flexbox和这里的网格吗？（请勿使用引导程序）

下面是它现在的样子：

null

.mygrid {
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  grid-gap: 20px;
  border: 5px solid red;
}

.content {
  grid-column: col-start 4 / span 7;
  grid-row: 1 / 3;
}

<div class="mygrid">
  <div class="content">test1</div>
  <div class="content">test2</div>
  <div class="content">test3</div>
  <div class="content">test41</div>
  <div class="content">test51</div>
</div>

null

https://codepen.io/anon/pen/gzmgbq

我想要一个内容div向下每一个新div的行，但它需要从那一列开始，并跨越那么多列。