CSS - flex 网格布局

Question

我有一个使用 flex 的简单网格。

我需要三列和每个 block 之间的边距，但不是每行的最后一个 block 。

这在这里工作，但我还需要所有 block 都是容器的 100%，所以我不希望在第 3 个 block 之后有边距。

是否可以有一个像这样的网格，其中 block 是百分比和内部边距而不是容器。

.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

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