ブログ記事内で画面幅100%に画像を表示するやつをCSSGridで実装する【コピペで使える】

左右に余白がある記事内で、任意の画像を画面幅100%に表示したい。

こういうやつ↓

実装方法はさまざまあると思いますが、今回は令和らしくCSS Gridを使ってみました。

サンプル

こちらのGistおよびCodePenにてご確認ください。

コンパイルしたCSSを置いておきます。

img {
  max-width: 100%;
}

p {
  margin-top: 1.5rem;
  margin-bottom: 0;
}

h1 {
  margin-top: 3rem;
  margin-bottom: 0;
}

.c-full-bleed {
  --gap: 1rem;
  --max-width: 30rem;

  display: grid;
  grid-template-columns:
    1fr
    min(var(--max-width), calc(100% - var(--gap) * 2))
    1fr;
}

.c-full-bleed > * {
  grid-column: 2;
}

.c-full-bleed__item {
  grid-column: 1 / -1;
  width: 100%;
}

@media (min-width: 768px) {
  .c-full-bleed {
    --max-width: 40rem;
  }
}

@media (min-width: 1024px) {
  .c-full-bleed {
    --max-width: 48rem;
  }
}

解説

記事全体をwrapper ( .c-full-bleed ) で囲み、その直下に全幅表示したい画像を含む要素 ( '.c-full-bleed__item' ) を置きます。

wrapperの最大幅はCSS変数 --max-width 、左右の余白は --gap でカスタマイズします。

中央寄せや左右の余白を marginやpaddingでやると実装が複雑化するため、中央寄せはGridで、
左右の余白は、グリッドのwidthを調整することでシンプルに実現できました。

全称セレクタ * (アスタリスク) の速度について

かつては全章セレクタは遅いので使うべきではないというのをよく見かけましたが、今日びあまり気にすることはないのではと思っています。

課題

Gridの影響で、wrapper直下の p や div 要素の縦marginの相殺がされなくなります。なので、すべてのwrapper要素のmarginを上だけにするなどの工夫が必要となります。