如何将元素放置在一个新的行上，与CSS-Grid相同的列上？

Question

我的内容重叠了。我知道这是因为我放置了相同的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的行，但它需要从那一列开始，并跨越那么多列。

Answer 1

您已经明确告知所有项占用同一行(grid-row:1/3)。为什么不取消这项规定呢？

null

css prettyprint-override">.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>