• マルチカラム：https://caniuse.com/mdn-css_properties_gap_multicol_context
• フレックス：https://caniuse.com/mdn-css_properties_gap_flex_context
• グリッド：https://caniuse.com/mdn-css_properties_gap_grid_context
• calc()利用：https://caniuse.com/mdn-css_properties_gap_grid_context_calc_values
• パーセント指定：https://caniuse.com/mdn-css_properties_gap_grid_context_percentage_values

マルチカラム、フレックス、グリッド間の列方向、行方向の隙間を指定する row-gap, column-gap をまとめて指定します。<column-gap> を省略した場合は <row-gap> と同じ値が適用されます。

.multicol {
  columns: 3;
  gap: 3rem;
}

<div class="multicol">
  いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせすん
  いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせすん
  いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせすん
  いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせすん
</div>

.flex {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.flex > * {
  flex: 1;
  flex-basis: 30%;
  background-color: #ddd;
  border: 1px solid #ccc;
  padding: .5rem;
}

<div class="flex">
 <div>Flex#1</div>
 <div>Flex#2</div>
 <div>Flex#3</div>
 <div>Flex#4</div>
 <div>Flex#5</div>
 <div>Flex#6</div>
</div>

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.grid > * {
  background-color: #ddd;
  border: 1px solid #ccc;
  padding: .5rem;
}

<div class="grid">
  <div>Grid#1</div>
  <div>Grid#2</div>
  <div>Grid#3</div>
  <div>Grid#4</div>
  <div>Grid#5</div>
  <div>Grid#6</div>
</div>

• https://drafts.csswg.org/css-align/#gap-shorthand
• https://developer.mozilla.org/ja/docs/Web/CSS/gap