强制以 css 网格开始新行

Question

考虑一下这种情况，我想这是一个相当普遍的情况：

我有一个 CSS 网格，有 10 列。 在某些行上，我希望在两列、五列或全部 10 列中显示内容。 默认行为似乎是让列流动来填充行，所以如果我想要一行有 6 列内容，然后在下面有一个新行，有 7 列内容，它实际上只会流动，这样我就有了有 10 列内容的行，然后在下一行下面有 3 列内容。

如何插入分隔符，以确保 7 列内容从下一行开始，以便生成的网格为：

Row 1: 6 cols of content, 4 empty cols

Row 2: 7 cols of content, 3 empty cols

请注意：我知道grid-row-start 属性，但我希望它是动态的，我不想在添加/删除内容时手动调整此属性。 我也知道我可以为每个新行打开一个带有display: grid 的新 div，但同样，似乎我应该能够在没有上述任何一种解决方案的情况下实现这种布局。

这样做的最佳实践方式是什么？

Answer 1

我现在找到了实现这一目标的方法。

在列单元格级别上指定要成为新行第一列的列起始编号。

例子：

.container {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  background-color: grey;
}

.single-col {
  padding: 1em;
  background-color: orange;
  border: black solid 1px;
}

.new-row {
  grid-column-start: 1;
}

<div class="container">
  <div class="single-col">One Col</div>
  <div class="single-col">One Col</div>
  <div class="single-col">One Col</div>
  <div class="single-col">One Col</div>
  <div class="single-col">One Col</div>
  <div class="single-col">One Col</div>

  <div class="single-col new-row">One Col - new row</div>
  <div class="single-col">One Col</div>
  <div class="single-col">One Col</div>
  <div class="single-col">One Col</div>
  <div class="single-col">One Col</div>
  <div class="single-col">One Col</div>
  <div class="single-col">One Col</div>

</div>