【position: absolute なし】display: gridを使って要素を重ねる

こんにちは。今回は、最近見かけたdiplay: gridを使って要素を重ねる方法について考えていこうと思います。

デモ
結論
デモの解説
ただし・・・
まとめ

デモ

ブログなどの記事一覧でよく見るカードの形です。左上のタグが画像に重なっています。

デモサイトはこちら。

Document

結論

結論から言えば、gridレイアウトを作り同じセルに複数の要素を置くとそれらが重なります。

シンプルな例を出します。正方形を5個重ねます。

<div class="Container">
  <div class="Child" style="background-color: red"></div>
  <div class="Child" style="background-color: green"></div>
  <div class="Child" style="background-color: blue"></div>
  <div class="Child" style="background-color: yellow"></div>
  <div class="Child" style="background-color: pink"></div>
</div>

.Container {
  width: 500px;
  height: 500px;
  display: grid;
}
.Child {
  grid-area: 1/1;
  width: 100%;
  height: 100%;
}

こうすると、ピンクの正方形が１つ表示されます。

では、どれでも良いのでz-indexを指定します。ここでは青にしてみます。

<div class="Container">
  <div class="Child" style="background-color: red"></div>
  <div class="Child" style="background-color: green"></div>
  <div class="Child" style="background-color: blue: z-index: 10"></div>
  <div class="Child" style="background-color: yellow"></div>
  <div class="Child" style="background-color: pink"></div>
</div>

すると青い正方形が表示されます。

このような形で、gridレイアウトで同じセルの場所に複数要素を置くことで重なりが表現できました。

デモの解説

デモのような実践的な場面でどう使うかを見ていきましょう。display: grid;を使う都合上いくつか気を付けるポイントがあります。

まずはタグ以外のカード部分です。

<article class="Card">
  <img src="./resources/images/logo-css.png" alt="" class="Card-Thumbnail" />
  <div class="Card__Bottom">
    <h2 class="Card-Title">gridで要素を重ねる</h2>
    <p class="Card-Content">
      ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
    </p>
  </div>
</article>

.Card {
  box-shadow: 0 0 12px 4px rgba(0, 0, 0, 0.4);
  width: 100%;
  max-width: 500px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.Card-Thumbnail {
  width: 100%;
}

.Card__Bottom {
  width: 100%;
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: 16px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.Card-Title {
  font-size: 20px;
  font-weight: bold;
}
.Card-Content {
  font-size: 14px;
  line-height: 1.5;
}

.Card__Bottom以下は今回のレイアウトには関係ないので流してOKです。.Cardにgridを適用していることがポイントです。

続いてタグの部分を作りましょう。タグの要素は.Cardの直下、画像と並列になっていればどこでも良いです。

<article class="Card">
  <div class="Card-Tag">HTML/CSS</div>
  <img src="./resources/images/logo-css.png" alt="" class="Card-Thumbnail" />
  <div class="Card__Bottom">
    <!-- 省略 -->
  </div>
</article>

.Card-Tag {
  padding: 4px;
  background-color: #0095d9;
  color: #fff;
}

この時点ではこんな感じ。

では重ねていきます。grid-areaというプロパティで、画像とタグを同じ位置に配置します。

.Card-Tag {
  grid-area: 1 / 1; /* 追加 */
  padding: 4px;
  background-color: #0095d9;
  color: #fff;
}

.Card-Thumbnail {
  grid-area: 1 / 1: /* 追加 */
  width: 100%:
}

grid-areaはgridレイアウトの位置を数字などで明示的に指定するプロパティです。1 / 1とすると左上のセル１つ分の領域を確保します。今回は縦は1列のみなので、一番上に配置されます。

詳しくは以下より。

grid-area - CSS: カスケーディングスタイルシート | MDN

grid-area は CSS の一括指定プロパティで、グリッドアイテムの寸法とグリッド内での位置を指定し、線、スパン、指定するために、グリッド配置に線や区間を指定したり、何も指定しなかったり（自動）することで、グリッド領域の端を指定します...

またgridレイアウトの数値についてはちらをご覧ください。ざっくりいうと縦横のグリッド線に左上からそれぞれ1、2、３・・・と番号が割り振られています。

Grid Areas (グリッド領域) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN

グリッド領域はグリッド上で一つ以上のグリッドセルからなる長方形の領域です。グリッド領域は線指定による配置や名前付きグリッド領域で領域を定義すると作成されます。

こうするとタグと画像が重なります。

さて、タグ部分が裏へいってしまったのでz-indexを指定しましょう。

.Card-Tag {
  grid-area: 1/1;
  z-index: 10; /* 追加 */
  padding: 4px;
  background-color: #0095d9;
  color: #fff;
}

するとこうなります。

おっと、タグが大きすぎますね。これがgridレイアウトを使ったことによる注意点で、同じセルに配置した要素は基本的にセルのwidth / height のサイズになります。

これでは要素を重ねられたとしても使えません。何らかの数値で指定する方法もありますが、動的コンテンツの場合はそれだとうまく表示するのは難しいですね。

そこでサイズ指定にfit-contentというキーワードを使います。

.Card-Tag {
  grid-area: 1/1;
  z-index: 10;
  width: fit-content; /* 追加 */
  height: fit-content;　/* 追加 */
  padding: 4px;
  background-color: #0095d9;
  color: #fff;
}

こうすると、コンテンツ分だけ領域を確保してくれます。従来のdisplay: inline-block;に近い挙動です。