Как убрать наложение границ у блоков?

Question

[Антон]

К примеру у нас есть следующая сетка, при этом она может быть больше и блоки могут быть разных размеров.

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

Как убрать двойные границы у блоков, что бы всегда отображалась одинарная граница?

Comments

[Максим]

по моему для div нету border-collapse - по этому только nth-child и врерёд
типа этого https://codepen.io/topicstarter/pen/NWGBgww
а может я ошибаюсь

Answer 1

[Lord_Dantes]

Я примерно попытался воссоздать потому-что самому стало интересно. Пришел к такой реализации, думаю если отредактировать дальше то можно дойти до нужного результата.
Единственный минус что если блоков будет не достигать нужного кол-ва то все пойдет плохо.
https://jsfiddle.net/lorddantes/ozt4pbcg/13/

Comments

[Антон]

Хорошая идея, только если будет к примеру 5 блоков в ряду, тоесть неизвестное кол-во блоков всего, оно поплывет вероятно)