CSS网格，将项目放在前一行空列中的新行上答案

【问题标题】：CSS grid, place item on new row in column empty on previous rowCSS网格，将项目放在前一行空列中的新行上
【发布时间】：2021-10-22 18:25:33
【问题描述】：

假设我有一个包含 2 列和未知数量项目的网格。类似：

.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

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

.new-row.col-2 {
    grid-column-start: 2;
    */ Now what ??? /*
}

<div class="grid">
    <!-- unknown number of items here -->
    <div class="new-row">Column 1</div>
    <div>Column 2</div>
    <div class="new-row">Column 1</div>
    <div class="new-row col-2">Column 2</div>
    <!-- unknown number of items here -->
</div>

在某些时候，我想在第 1 列中有一个项目，然后是第 2 列中的一个项目，但在下一行。喜欢：


Column 1	Column 2
Column 1
	Column 2

我不知道之前或之后会有多少项目，所以我不能在grid-row-start中输入适当的数字。

我无法更改 HTML，也无法使用 JavaScript。

我怎样才能做到这一点？

【问题讨论】：

在不知道项目数量的情况下这是不可能的。也就是说，您可以将“新行”元素设为 2 fr 宽...应该具有相同的效果。

标签： css css-grid

【解决方案1】：

您可以取整个宽度并考虑使用 padding 或 margin 将元素推入第二列：

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

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

.new-row.col-2 {
  grid-column: 1/-1;
  margin-left:50%; /* push to second column */
}

<div class="grid">
  <!-- unknown number of items here -->
  <div class="new-row">Column 1</div>
  <div>Column 2</div>
  <div class="new-row">Column 1</div>
  <div class="new-row col-2">Column 2</div>
  <!-- unknown number of items here -->
</div>

【讨论】：