CSS Grid で背景画像を重ねて 2 番目に大きい要素のサイズに合わせる方法

CSS Grid で要素同士を重ね合わせて、2 番目に大きい要素にサイズを合わせたいと思ったことはないだろうか？

例えば CSS Grid では、グリッドレイアウトができる他にも、複数要素を重ね合わせることができるため、従来の CSS では background-image を使用して実装していた、「背景画像があって、その上にコンテンツがある」というようなレイアウトも可能である。

この場合、img タグを使うので、background-image とは異なりブラウザによる遅延読み込みが使えるし、CSSを解析するよりも早くダウンロードできる。また Preload Scanner が効いたりと、ウェブパフォーマンス的にはかなりメリットがある。

しかし、CSS Grid は一番大きい要素に伸びるという性質があるため、背景画像が大きいと中のコンテンツによらず伸び切ってしまうというデメリットがある。

CSS Grid で重ねた背景画像をコンテンツ幅に合わせる方法

これについて解決法を見つけた。結果としては、背景画像に対して position: absolute; を指定した上で、グリッドになっている要素に contain: content; (または paint)を指定する。

まず、position: absolute; を背景画像につけると、フローから外れるため、親要素のサイズ計算からも除外される。しかし今のままでは背景画像が親要素からはみ出して表示されるため、contain: content; をグリッドに対して指定すると、範囲外が切り取られはみ出なくなる。また、contain: content; には新たな包含ブロックを生成する副作用があるため、position: relative; を指定しなくても良い。

こうすると、重ね合わせたグリッドの中で次に大きい要素がグリッド自体の大きさに合わさるため、他の要素に合わせてグリッドを構成することができる。