レスポンシブの margin と width 設定

要件

縦 2 列に並べたい。
marginを均等に設定したい。

結論コード

@media (max-width: 1500px) {

  .box {

    margin:0 0 0 1em;

    width: calc((100% - 3em) / 2);

  }

}

考え方

1.最初に「margin」を決定します。
今回は、1emと設定しました。

2.次に今回必要な「margin」の数を決定します。
今回は縦 2 列なので、計 3 つのmargin( 3 × 1 em)が必要になります。

3.次に縦 2 列それぞれの「width」を決定します。
全体(100%)から、計 3 つのmargin( 3 × 1 em)を引いた数値が、縦 2 列のwidthになります。
縦 1 列のwidthを求めたいので、2 で割ります。