我尝试显示一个元素网格，每行元素的数量固定。然而，由于服务器端的原因，这些元素被封装在容器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整除时，在第一个元素的元素之后直接显示下一个容器的元素。
我现在得到的是：
x1c 0d1x的数据
我想要的：

的
我发现得到我想要的结果的唯一方法是使用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>

的数据