How to remove overlapping borders from blocks?

Question

css

For example, we have the following grid, while it can be larger and the blocks can be of different sizes.

<div class="flex">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}
.flex {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 400px;
}
.flex div {
  width: calc(100% / 3);
  height: 200px;
  border: 2px solid red;
}

How to remove double borders from blocks so that a single border is always displayed?

Answer 1

I roughly tried to recreate because I myself became interested. I came to such an implementation, I think if you edit further, you can reach the desired result.
The only negative is that if the blocks do not reach the required number, then everything will go badly.
https://jsfiddle.net/lorddantes/ozt4pbcg/13/