Flex box如何为项目放置指定列

Question

我有一个创建可重复块的软件。他们使用flexbox。当前，它们基于可重复块的位置对齐，可重复块堆叠在每个项目下面。在下图中说是否可重复块是item1，item2，item3，item4。它将以相同的顺序呈现列。

但是我想允许用户使用多列选项。我可以使用网格，并且考虑到它是动态的，我不能使用它。假设我可以将grid-item属性分配给项目1作为firstone并创建grid-template-areas:"firstone secondone"，但是将item2，item3分配给grid-item secondone将使内容彼此重叠。

grid-template-areas:"firstone secondone" "firstone secondone" "firstone secondone"可以解决问题，但我没有生成此CSS的方法，最多可以有4个项目。

任何可能的解决方案？备择方案？

Answer 1

针对这些问题使用grid是正确的选择！您要实现的目标比flexbox的使用情况要复杂一些。

通过使用grid-template-columns而不是grid-template-areas和:first-child选择器，可以实现您所描述的内容。

给出此示例HTML：

<div>
  <article>Item 1</article>
  <article>Item 2</article>
  <article>Item 3</article>
  <article>Item 4</article>
</div>

您可以使用此CSS：

div {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

article {
  grid-column: 2;
}

article:first-child {
  grid-column: 1;
}

看看这个小提琴看看一个例子。https://jsfiddle.net/h9k5x7uf/