具有平面混合项目列表的两列网格答案

【问题标题】：Two columns grid with flat mixed list of items具有平面混合项目列表的两列网格
【发布时间】：2018-11-09 14:06:05
【问题描述】：

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

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

如果我将它们全部添加grid-row-start: 1，它们就会在顶部相互重叠。

我不想改变容器的结构，因为我只想打乱类来移动项目。从理论上讲，我可以在 JavaScript 中添加 row-1、row-2 等类，并使用它来确定单元格应该从哪里开始，但我想知道是否有更简洁的方法来纯粹在 css 中处理这个问题。

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

【问题讨论】：

您能在此处添加您的代码吗？

标签： javascript html css css-grid

【解决方案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。

【讨论】：

非常感谢！