两列网格，带有平面混合项列表

Question

我正在尝试对随机项目的平面列表进行两列布局，其中一些应该在左侧，彼此之间，其他应在右侧。

到目前为止，我正在使用CSS网格，但是“空行”存在问题，因为这些单元格不知道“从顶部开始”。

如果我全部添加grid-row-start: 1，它们都将在顶部彼此折叠。

我不想更改容器的结构，因为我只想改组类以移动项目。从理论上讲，我可以在JavaScript中添加类似row-1，row-2等的类，并使用它来确定单元格应该从哪里开始，但是我想知道是否有一种更简单的方法可以完全在css中进行处理。

演示：https://jsfiddle.net/mbynw4cL/1/

Answer 1

因此，您想要使用grid-auto-flow属性：

.grid {
  width: 200px;
  border: 1px solid green;
  display: grid;
  grid-template-columns: auto auto;
  grid-auto-flow: dense;
}

.item {
  width: 30px;
  height: 30px;
  margin: 5px;
}

.item.left {
  grid-column-start: 1;
  justify-self: start;
  background: red;
}

.item.right {
  grid-column-start: 2;
  justify-self: end;
  background: blue;
}

<div class="grid">
  <div class="item left"></div>
  <div class="item left"></div>
  <div class="item right"></div>
  <div class="item right"></div>
  <div class="item left"></div>
</div>

这将“填补”空白。

有关CSS网格的更多信息，请参见https://css-tricks.com/snippets/css/complete-guide-grid/#article-header-id-25。