html - 你如何将元素放在新行上，与 css-grid 相同的列？

Question

我的内容重叠。我知道这是因为我放置了相同的 col-start，但是如何让内容 div 增长并在我的 css 网格中间向下移动？我应该在这里使用带有网格的 flexbox 吗？ (请不要引导)

这是现在的样子:

.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>

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

我希望内容 div 在每个新 div 的行中向下移动，但它需要从该列开始并跨越那么多列。

Answer 1

您已经特别指定所有元素占据同一行(grid-row: 1/3)。为什么不删除该规则？

.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>