CSSにおける自動幅ブロックを使用したタイルレイアウトのインデント

1行に4つのブロックがあるタイルレイアウトを考えてみましょう：

css.child {
  width: 25%;
}

ブロックに水平方向と垂直方向のパーセンテージで インデントを追加してみましょう：

css.child {
  margin-right: 1.5%;
  margin-bottom: 1.5%;
}
.child:nth-child(4n) {
  margin-right: 0;
}

今のままでは、ブロックとインデントの合計幅が 100%を超えるため、正しく機能しません。 正しく動作させるためには、 インデントのスペースを確保するために 各ブロックから一部を差し引く必要があります。 この差し引く量を計算してみましょう。

この場合、ブロックは4つ、 それらの間には1.5％のインデントが3つあります。 差し引く量を計算するには、 インデントの合計をブロックの数で割ります：

すると、各ブロックの幅は次のようになります：

結果として次のコードになります：

css.child {
  width: 23.875%;
  margin-right: 1.5%;
  margin-bottom: 1.5%;
}
.child:nth-child(4n) {
  margin-right: 0;
}

この計算を手動で行わず、 calc関数に計算を任せることもできます：

css.child {
  width: calc(25% - 1.5% * 3 / 4);
  margin-right: 1.5%;
  margin-bottom: 1.5%;
}
.child:nth-child(4n) {
  margin-right: 0;
}

ブロックの幅もcalc関数に計算させましょう：

css.child {
  width: calc(100% / 4 - 1.5% * 3 / 4);
  margin-right: 1.5%;
  margin-bottom: 1.5%;
}
.child:nth-child(4n) {
  margin-right: 0;
}