html - 强制新行以 css 网格开头

Question

考虑这种情况，我认为这是一个相当普遍的场景:

我有一个 css 网格，有 10 列。
在某些行上，我希望以两列、五列或全部 10 列的形式显示内容。
默认行为似乎是使列流动以填充行，因此如果我想要一行包含 6 列内容，然后在下方添加一个包含 7 列内容的新行，它实际上只会流动，以便我有一个行有 10 列内容，然后在下一行下方将有 3 列内容。

如何插入断路器，以确保 7 列内容从下一行开始，以便生成的网格为:
Row 1: 6 cols of content, 4 empty colsRow 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>