Как правильно сделать отступы у flex элементов при flex-wrap?

Question

[Grione]

Есть вот такой базовый код. Нужно, что бы было 2 ряда по 3 элемента. Хочу использовать gap для отступов т.к. это удобно. Но не могу никак понять, как правильно убрать пустой отступ справа. Подскажите как правильно использовать gap для флексов при flex-wrap: wrap ?

Я понимаю, что могу использовать вместо gap маргины, и делать у контейнера отрицательные отступы по бокам, но хочется именно с gap разобраться.

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

.container {
  width: 500px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  border: 1px solid green;
}

.element {
  width: calc(33.3% - 20px);
  height: 50px;
  background: black;
}

Answer 1

[Сергей delphinpro]

.element {
  /* width: calc(33.3% - 20px); */
  width: calc((100% - 20px * 2) / 3);
  height: 50px;
  background: black;
}

Или сделать так:

.container {
  width: 500px;
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid green;
}

.element {
  height: 50px;
  background: black;
}

Comments

[Grione]

Спасибо. Давно пора такие вещи через грид делать...

Answer 2

[imko]

Так отступа 2 а элемента 3. Надо не 20 вычитать из ширины а (2/3)*20
А вообще такое гридом в три колонки делатеся