アイテムを横並びにする時にCSSのcalc関数を使って余白を指定する方法です。

アイテムが3カラムで横並びになっているケース

アイテムが横並びになっていて、左右の余白はゼロでアイテム間のみ余白がある場合、display: flex;を使用すると簡単に横並びにできます。

3カラムなので、width: 33.3333%;と指定して、並べていきます。

CSS

.item-list {
  display: flex;
  flex-wrap: wrap;
}

.item {
 width: 33.3333%;
 height: 260px;
 background: #ddd;
}

このままだと、余白無しで目一杯に横並びになっているだけなので、marginで余白の設定をしていきます。

先ほどのスタイルにmargin: 0 30px 30px 0;を追加します。marginを追加するだけだと、カラム落ちしてしまうので、widthも以下の様に調整します。

CSS

.item-list {
  display: flex;
  flex-wrap: wrap;
  width: calc(100% + 30px); 
  overflow: hidden; /* 3つ目のmargin-right分は隠す */
}

.item {
 width: calc(33.3333% - 30px); /* margin-right分を引きます */
 height: 260px;
 margin: 0 30px 30px 0; /* 余白 */
 background: #ddd;
}

調整すると以下の様になると思います。

See the Pen calc by gri-t (@gri-t) on CodePen.

その他の調整方法

見た目は先ほどのと同じですが、CSSが少しだけ異なります。今度は各アイテムにmargin-rightを設定しないで、justify-content: space-between;を使用して各アイテムを均等に配置させています。

CSS

.item-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* 各アイテムを均等に配置 */
  width: 100%;
}

 .item {
    width: calc(33.3333% - 60px / 3); /* 30pxづつ余白をとりたいので、余白の合計値をアイテム数で割っています */
    height: 260px;
    margin-bottom: 30px; /* 各アイテムのmargin-bottomを指定 */
    background: #ddd;
  }

See the Pen calc by gri-t (@gri-t) on CodePen.