Seamless grid of elements encapsulated in containers

Issue

I'm trying to display a grid of elements with a fixed amount of elements per row. However, for server-side reasons, those elements are encapsulated in batches (of variable sizes) inside container divs. Here is what it would look like :

<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>

In the grid, I want to display 4 elements on each row (preferably using flexbox, but not a requirement). I have not figured out yet how to display the elements of the next container directly right after the elements of the first when the amount of elements is not dividable by 4.

What I'm getting right now :

What I want :

The only way I found to get the result I wanted was to use JS to move the items of the other containers to the first, but this is not a proper solution given the place where those elements are going to appear. I would like a pure HTML/CSS solution.

Here is the CSS I have so far :

.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>

Solution

Use display: grid or inline-grid on the container and display: contents on the child wrappers.

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

.container {
  margin-bottom: 5px;
  display: contents;
}

.grid {
  display: inline-grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 5px;
}

<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>

Answered By - Paulie_D