【CSS】グリッドレイアウトで擬似クラス「:nth-child」はもう使わない！

グリッドレイアウト（格子状配置）で、画像を外枠いっぱいに並べるとき、右端の画像に右マージンがあると、外枠の中にピッタリと収まらず、左側に配置されてしまいます。

それを避けるため、右端の画像だけ右マージンの値を 0（ゼロ）にして、外枠の中にピッタリと収めたりしますよね。

今回は、ネガティブ・マージン（マイナスのマージン）を使って、それを実現する方法を紹介します。

擬似クラス「:nth-child」でグリッドレイアウト
ネガティブ・マージンでグリッドレイアウト
あとがき

擬似クラス「:nth-child」でグリッドレイアウト

ボクは今まで、何冊かの HTML と CSS に関する本を見てきました。
その中で、グリッドレイアウトについて記述している箇所をチェックしてみました。

すると、どの本も決まって、擬似クラス「:nth-child」を使っています。
それによって、右端に来る画像の右マージン（margin-right）の値を 0（ゼロ）にしています。

具体例

たとえば、次のような場合を考えてみます。

外枠の幅： 640px（ピクセル）
画像の幅： 200px
画像と画像の横の間隔： 20px
画像と画像の縦の間隔： 15px

外枠の中に、画像が横に 3つずつ並びますので、3の倍数番目の画像の右マージンを 0（ゼロ）にして、ピタリと収めています。

HTML の例

<div class="gallery">
  <ul class="gallery__list">
    <li><img src="画像1"></li>
    <li><img src="画像2"></li>
    <li><img src="画像3"></li>
    <li><img src="画像4"></li>
    <li><img src="画像5"></li>
  </ul>
</div>

CSS の例

.gallery {
  width: 640px;
  background-color: #ffcdd2;
}

.gallery__list {
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.gallery__list > li {
  float: left;
  margin: 0 20px 15px 0;
  list-style: none;
}

.gallery__list > li:nth-child(3n) {
  margin-right: 0;
}

.gallery__list > li > img {
  width: 200px;
}

ネガティブ・マージンでグリッドレイアウト

グリッドレイアウトは、マージンにマイナスの値を指定することによっても、実現できます。

具体例

たとえば、先ほどと同じく、次のような場合を考えてみます。

外枠の幅： 640px（ピクセル）
画像の幅： 200px
画像と画像の横の間隔： 20px
画像と画像の縦の間隔： 15px

外枠の左右のマージンに、マイナスの値（画像と画像の横の間隔の半分の値）を指定することにより、外枠の領域が左右に広がります。
画像の左右のマージンとして、画像と画像の横の間隔の半分の値を指定します。

すると、画像の左右のマージンが、外枠の広げた左右のマージンにピタリと収まります。

CSS の例

.gallery {
  width: 640px;
  background-color: #c8e6c9;
}

.gallery__list {
  overflow: hidden;
  margin: 0 -10px;
  padding: 0;
}

.gallery__list > li {
  float: left;
  margin: 0 10px 15px;
  list-style: none;
}

.gallery__list > li > img {
  width: 200px;
}