我如何使用CSS复制这个网格？

Question

所以我试图用 grid-auto-flow: column; 复制这个网格。但我没能实现。

问题#1：容器应该是水平滚动的，因为它可以有更多选项
问题#2：由于我使用网格，每一列都采用最长的项目，而不是对图像上的所有元素进行分组，而是将它们分开
注意：应该只包含两行

到目前为止我只能实现这个例子：

但是由于每列都有特定的宽度，因此在 1 & 3 和 3 & 5 之间留有一些空间

这是代码：

HTML：

  <div class="grid">
    <div style="width: 96px;" class="module">1</div>
    <div style="width: 128px;" class="module">2</div>
    <div style="width: 176px;" class="module">3</div>
    <div style="width: 208px;" class="module">4</div>
    <div style="width: 176px;" class="module">5</div>
  </div>

CSS：

.grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, auto);
  grid-template-columns: repeat(auto-fill, minmax(auto, 1fr));
  gap: 8px;
}
.module {
  height: 40px;
  border-radius: 8px;
  background-color: aqua;
}

Answer 1

考虑让项目自然地包裹在 CSS Flexbox 容器中（在下面的示例中以红色显示）。

.details {
  font-family: sans-serif;
  display: flex;
  flex-wrap: wrap;
  width: 500px;
  background: red;
  gap: 0.5rem;
  padding: 0.5rem;
}
.detail {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem;
  background: white;
  border-radius: 0.25rem;
}
.detail dd {
  display: flex;
  flex-direction: column;
  margin: 0;
}

<dl class="details">
  <div class="detail">
    <dt><img alt="Reviews" src="https://placekitten.com/36/36" width="36" height="36"/></dt>
    <dd><strong>5 star average</strong> from over 34 reviews</dd>
  </div>
  <div class="detail">
    <dt><img alt="Order Requirements" src="https://placekitten.com/36/36" width="36" height="36"/></dt>
    <dd><strong>$6.00</strong> minimum order</dd>
  </div>
  <div class="detail">
    <dt><img alt="Location" src="https://placekitten.com/36/36" width="36" height="36"/></dt>
    <dd><strong>Richmond</strong> county</dd>
  </div>
  <div class="detail">
    <dt><img alt="Prep Time" src="https://placekitten.com/36/36" width="36" height="36"/></dt>
    <dd><strong>20 min</strong> preparation</dd>
  </div>
  <div class="detail">
    <dt><img alt="Flexibility" src="https://placekitten.com/36/36" width="36" height="36"/></dt>
    <dd><strong>Orders up to 1 day</strong> in advance</dd>
  </div>
</dl>