CSS - гибкий макет сетки

Question

У меня есть простая сетка с использованием flex.

Мне нужно три столбца и поле между каждым блоком, но не в последнем блоке каждой строки.

Это работает здесь, но мне также нужно, чтобы все блоки составляли 100% контейнера, поэтому я не хочу, чтобы поле было после 3-го блока.

Возможно ли иметь такую ​​сетку, где блоки представляют собой проценты и маржу внутри, а не по отношению к контейнеру.

.block {
  border: 1px solid red;
  display: flex;
  flex-wrap: wrap;
  max-width: 900px;
  justify-content: flex-start;

}

.block__item {
  background: grey;
  height: 20px;
  margin-bottom: 2px;
  width: calc(33.33% - 2px);
  margin-right:2px;  
}

<div class="block">
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
</div>

Answer 1

Используйте last-child / nth-child, чтобы удалить поля из последнего элемента каждой строки, и положитесь на flex-basis / flex-grow, чтобы установить ширину:

.block {
  border: 1px solid red;
  display: flex;
  flex-wrap: wrap;
  max-width: 900px;
  justify-content: flex-start;
  margin:10px 0;

}

.block__item {
  background: grey;
  height: 20px;
  margin-bottom: 2px;
  flex-basis:26%; /*Smaller than 33% and bigger than 25%*/
  flex-grow:1;
}
.block__item:not(:last-child):not(:nth-child(3n+3)) { 
  margin-right:2px;
}

<div class="block">
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
</div>

<div class="block">
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
</div>
<div class="block">
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
</div>

Answer 2

.block {
  border: 1px solid red;
  display: flex;
  flex-wrap: wrap;
  max-width: 900px;
  justify-content: flex-start;

}

.block__item {
  background: grey;
  height: 20px;
  border-bottom: 2px solid white;
  border-right: 2px solid white;
  flex-grow: 1;
  flex-shrink: 0;
}

.block__item:last-of-type {
  border-right: none; 
}

<div class="block">
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
  <div class="block__item"></div>
</div>
<div class="block">
  <div class="block__item"></div>
  <div class="block__item"></div>
</div>
<div class="block">
  <div class="block__item"></div>
</div>