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

Contents

  1. アイテムが3カラムで横並びになっているケース
  2. space-betweenを使って調整する方法

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

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

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

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

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

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

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

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

space-betweenを使って調整する方法

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

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