IEの独自仕様に呪いをかけつつ、複数カラムのためにfloatを駆使していた頃がなつかしい今日この頃ですが、天下の救世主flexboxに、gapというプロパティがあるのだそうです。gridレイアウトに使われていて、flexboxに導入されたのも結構前の話らしいですが…
ちなみにflexbox使いまくりなのに、中身はすぐ忘れちゃうので、いつもこのページを見ます。いつもいつも見ます。あんまり見るので、fとか入れただけで候補に上がります。
グリッドでタイル状にアイテムを並べる時、marginだと、上下左右の設定を組み合わせないといけなかったのが、
gap: 15px 30px;みたいな感じで設定できます。一つ目の数字が行方向（row-gap）で、二つ目は列方向（column-gap）。親要素（display: flexが当たっている要素）に設定するのが肝。