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

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

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

css.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に増やして余白のためのスペースを確保し、 結果がどうなるか見てみましょう：

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

css.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つ削除し、 この最後の行で問題が発生しないことを確認してみましょう：

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

css.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;
}

Результат: