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

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

.child {
	width: 25%;
}

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

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

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

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

1.5% * 3 / 4 = 1.125

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

25% - 1.5% * 3 / 4 = 23.875%

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

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

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

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

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

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

ブロックの幅をパーセンテージで設定し、タイルレイアウトで1行に3つのブロック、それらの間のスペースを3%にしてください。

ブロックの幅をパーセンテージで設定し、タイルレイアウトで1行に6つのブロック、それらの間のスペースを0.5%にしてください。

ブロックの幅をパーセンテージで設定し、タイルレイアウトで1行に4つのブロック、ブロック間のスペースを30pxにしてください。

ブロックの幅をパーセンテージで設定し、タイルレイアウトで1行に5つのブロック、ブロック間のスペースを50pxにしてください。