Tambourine作業メモ

主にスキル習得のためにやった作業のメモ。他人には基本的に無用のものです。

CSS GRIDを勉強してみる(10) - display: contentsとの関係

今度は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;
}

レンダリング結果はこう

f:id:Tambourine:20181023124656p:plain

ここで、box1にdisplay: contentsをセットすると、

f:id:Tambourine:20181023131254p:plain

のように、box1の内側の要素がボックスコンテナの直近の子孫のようにグリッドに並ぶことになる。