複数の要素を重ね合わせるためには、従来、position: absoluteを使うことが多かった。親要素にposition: relativeを、その子要素にposition: absoluteを設定するというもの。
<div style="position: relative;">
<div style="position: absolute;"><!-- ... --></div>
<div style="position: absolute;"><!-- ... --></div>
</div>
しかしその場合、子要素自身のサイズに基づいて親要素のサイズを設定するということができない。CSSだけでは実現できないので、JavaScriptを使うことになる。
<div style="position: relative; height: 421px;">
<div style="position: absolute;"><!-- ... --></div>
<div style="position: absolute;"><!-- ... --></div>
</div>
そんなとき、position: absoluteの代わりにGridを使うと、CSSだけでこれを実現できるようになる。
<div class="wrapper">
<div><!-- ... --></div>
<div><!-- ... --></div>
</div>
.wrapper {
display: grid;
}
.wrapper > * {
grid-row: 1 / -1;
grid-column: 1 / -1;
}
このようにすると、自ずと、最も大きい子要素のサイズに基づいて親要素のサイズが設定されるようになる。
これを使うと、たとえば、ボタンのラベルの長さが変わってもボタン自体の幅は変化しないようにすることができる。
See the Pen Untitled by Yuhei Yasuda ( @yuheiy) on CodePen.
あるいは、複数の画像がクロスフェードするギャラリーのようなUIを作成するときに、画像自体に基づいてサイズを設定することもできる。