css - 如何仅使用 css 创建 2 行元素网格？

Question

所以我有以下 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)，但我相信这会消除交错效果，因为它会保持网格布局。

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

Answer 1

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

.wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  border: solid 2px gray;
  overflow-y: scroll;
  max-width: 400px;
}

.child {
  height: 60px;
  background-color: red;
  margin: 4px;
}

.flex:first-child .child:nth-child(even) {
  min-width: 50px;
}

.flex:first-child .child:nth-child(odd) {
  min-width: 75px;
}

.flex:last-child .child:nth-child(even) {
  min-width: 75px;
}

.flex:last-child .child:nth-child(odd) {
  min-width: 65px;
}

.flex {
  display: flex;
}

<div class="wrapper">
  <div class="flex">
    <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 class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
  <div class="flex">
    <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 class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

编辑:如果无法编辑 HTML，但您有一个外部容器和一个内部容器(即本例中的 .wrapper 和 .flex)，您也可以通过给内层容器一个比外层容器的min-width窄的min-width，并设置flex-wrap: wrap来达到预期的效果:

.wrapper {
  border: solid 2px gray;
  overflow-y: scroll;
  max-width: 400px;
}

.flex{
   min-width:900px;
   flex-wrap:wrap;
}

.child {
  height: 60px;
  background-color: red;
  margin: 4px;
}

.child:nth-child(even) {
  min-width: 50px;
}

.child:nth-child(n+3) {
  min-width: 60px;
}

.child:nth-child(n+5) {
  min-width: 40px;
}

.child:nth-child(odd) {
  min-width: 75px;
}

.flex {
  display: flex;
}

<div class="wrapper">
  <div class="flex">
    <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 class="child"></div>
    <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 class="child"></div>
    <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 class="child"></div>
    <div class="child"></div>
  </div>
</div>