我如何仅使用CSS创建2行的项目网格？

Posted 2023-01-13

所以我具有以下html结构：

<div class="wrapper">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    ...
</div>

我要实现的布局是这样：

现在，我发现可以通过使用flexbox在one行上实现以下效果：

.wrapper 
  display: flex;
  align-items: flex-start;
  flex-wrap: nowrap;
  overflow-x: auto;

这适用于1行，并给我以下内容：

然后我在css网格上做了一些阅读，因为听起来这就是它引入的原因之一。 flexbox适用于一维，而网格适用于一维，但是我一直无法将其包裹住，我仍然不确定这是否是正确的路线。

我想知道我应该采用的方法是建立一个具有1列和2行的网格，然后列出这些列中的项目。

另一种选择是具有2行和X列（每项1个），但我相信这将消除交错的效果，因为它将保持网格布局。

有人对如何实现这种布局有任何建议吗？

答案

网格将其所有行对齐在一起，因此您将失去flexbox的交错效果。最简单的解决方案是拥有一个外部网格或flexbox来容纳两个内部flexbox：