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

Question

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

这是现在的样子：

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

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

How do you place elements on a new row, same column with css-grid?

html

css

flexbox

css-grid