CSSで正しい余白を持つグリッドレイアウト

マージンを使用した余白で、本当に問題なく動作するグリッドレイアウトを作成しましょう。最初に、余白のない次のようなグリッドがあるとします：

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
	<div class="child">5</div>
	<div class="child">6</div>
	<div class="child">7</div>
	<div class="child">8</div>
	<div class="child">9</div>
</div>

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 300px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

では、要素間の水平方向の余白をmarginで作ってみましょう。

そのために、すべての子要素にmargin-rightを10pxに設定し、 3つ目ごとの子要素についてはこのmarginをゼロにリセットします。これにはnth-child疑似クラスを使用し、3つ目ごとの要素を取得するようにパラメータを設定します。

また、親要素の幅を320pxに増やして余白のためのスペースを確保し、結果がどうなるか見てみましょう：

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
	<div class="child">5</div>
	<div class="child">6</div>
	<div class="child">7</div>
	<div class="child">8</div>
	<div class="child">9</div>
</div>

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 320px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	margin-right: 10px;
	border: 1px solid green;
}
.child:nth-child(3n) {
	margin-right: 0;
}

これで全てが機能しています。最後の行の要素が少なくなるように最後の要素を1つ削除し、この最後の行で問題が発生しないことを確認してみましょう：

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
	<div class="child">5</div>
	<div class="child">6</div>
	<div class="child">7</div>
	<div class="child">8</div>
</div>

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 320px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	margin-right: 10px;
	border: 1px solid green;
}
.child:nth-child(3n) {
	margin-right: 0;
}

要素間の距離が20pxで、1行に2つの要素を持つグリッドレイアウトを作成してください。