今度はdisplay: contents
との関係の話。また知らない子の登場である。
ちょっと調べてみたところ、display: contents
を指定すると起きることは
あたかもその内容がタグで囲われていないように扱われるということのようだ。ほっほーう。
DOMツリー上、レベルがひとつ上がるようなことになるわけ。
グリッドの場合に何が起きるかだけど、グリッドのアイテムに対してdisplay: contents
を指定すると、
その中のブロック要素がグリッドアイテムとして扱われるようになる。
というわけで、box1の中に複数のアイテムを持っているような例からスタートしよう。 HTML とCSSはこんなかんじ。
<div class="wrapper"> <div class="box1"> <div class="nest">a</div> <div class="nest">b</div> <div class="nest">c</div> </div> <div class="box2">Two</div> <div class="box3">Three</div> <div class="box4">Four</div> <div class="box5">Five</div> </div>
.wrapper { color: white; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(60px, auto); } .wrapper div{ padding: 10px; } .box1 { background-color: #660000; grid-column-start: 1; grid-column-end: 5; } .nest { background-color: ivory; color: black; border-color: tomato; border-style: solid; } .box2 { background-color: #006600; } .box3 { background-color: #000066; } .box4 { background-color: #666600; } .box5 { background-color: #660066; }
レンダリング結果はこう
ここで、box1にdisplay: contents
をセットすると、
のように、box1の内側の要素がボックスコンテナの直近の子孫のようにグリッドに並ぶことになる。