封装在容器中的无缝元素网格

Question

我试图显示一个元素网格，每行包含固定数量的元素。然而，由于服务器端的原因，这些元素被批量（可变大小）封装在容器 div 内。 这是它的样子：

<div class="grid">
    <div class="container">
      <div class="element"></div>
      <div class="element"></div>
      <div class="element"></div>
      <div class="element"></div>
      <div class="element"></div>
      <div class="element"></div>
    </div>
    <div class="container">
      <div class="element"></div>
      <div class="element"></div>
      <div class="element"></div>
    </div>
  </div>

在网格中，我想每行显示4个元素（最好使用flexbox，但不是必需的）。我还没有弄清楚当元素数量不能被 4 整除时如何在第一个容器的元素之后直接显示下一个容器的元素。

我现在得到的：

我想要什么：

我发现获得我想要的结果的唯一方法是使用 JS 将其他容器的项目移动到第一个容器，但是考虑到这些元素将出现的位置，这不是一个正确的解决方案。我想要一个纯 HTML/CSS 解决方案。

这是我目前拥有的 CSS :

.element {
  width: 30px;
  height : 30px;
  border : 1px solid black;
}

.container {
  margin-bottom: 5px;
  display : flex;
  flex-wrap: wrap;
  gap: 5px;
  width : 100%;
}

.grid {
  width: 150px;
  display: flex;
  flex-wrap: wrap;
}

<div class="grid">
    <div class="container">
      <div class="element"></div>
      <div class="element"></div>
      <div class="element"></div>
      <div class="element"></div>
      <div class="element"></div>
      <div class="element"></div>
    </div>
    <div class="container">
      <div class="element"></div>
      <div class="element"></div>
      <div class="element"></div>
    </div>
  </div>

Answer 1

您需要做的就是将容器设置为

inline-block

并将宽度固定为小于每个元素宽度的 5 倍，每行将有 4 个。

.element {
  outline: 1px solid black;
  height: 48px;
  width: 48px;
  display: inline-block;
}

.container {
  outline: 1px solid blue;
  max-width: 206px
}

<div class="container">
      <div class="element"></div>
      <div class="element"></div>
      <div class="element"></div>
      <div class="element"></div>
      <div class="element"></div>
      <div class="element"></div>
    </div>
    <div class="container">
      <div class="element"></div>
      <div class="element"></div>
      <div class="element"></div>
    </div>