[web制作][初心者向け] position:relative を使わずに、gridで画像の中央にずれないテキスト（説明文）を重ねる方法

gridについて学んでいる際に便利なテクニックを知ったので、備忘録として残したいと思います。

こういうのが作りたい

以下の図のように、画像の中心に説明文を配置したい。

position:relativeだと上手くいかない

画像の中心に説明文を配置する方法について調べてみると、
親要素に position: relative;
子要素に position: absolute;（今回の場合は中央にしたい説明文に対して）
を設定。
さらに子要素に　top: 50%; や left: 50%;
などを追加していく方法が紹介されていたので試したのですが、
画面の幅を変えると説明文が中央からずれてしまい、
レスポンシブ対応が上手くいきませんでした。

gridだとシンプルかつレスポシブル対応が簡単

そこで登場するのがgridです。
親要素をgridコンテナー
子要素をgridアイテム
として、子要素を同じ格子（場所）に配置することで、
子要素を重ねることができます。

HTML

まずはHTMLからです。
今回はこの画像と説明文の１つの組み合わせをclass="card"とします。

index.html

<div class="card">
  <img class="card-image" src="" alt="" />
  <div class="card-description">
    <h2 class="card-description-title">Heading</h2>
    <p class="card-description-text">テキストテキストテキスト</p>
  </div>
</div>

親要素をclass="card"として、
その子要素にimg(class="card-image")とdiv(class="card-description")
を入れています。

CSS gridコンテナーとgridアイテムを設定

次はcssです。
早速gridを使用します。

style.css

.card {
  display: grid;
}

これだけで親要素のclass="card"がgridコンテナーとなり、
子要素がgirdアイテムとなったため、自由に配置していくことができます。

CSS 画像の中央に説明文を配置

それでは画像の中央に説明文を配置していきます。
まず画像についてです。

style.css

.card-image {
  /* 格子のサイズに合わせて画像サイズを変更する */
  justify-self: stretch;
  grid-column-start: 1;
  grid-row-start: 1;
}

こうすることで、１×１マスの格子の中に、格子のサイズいっぱいに調整された画像が配置されます。

次に説明文です。

style.css

.card-description {
  /* 説明文を水平方向の（横軸の）中央に配置する */
  justify-self: center;
  /* 説明文を垂直方向の（縦軸の）中央に配置する */
  align-self: center;
  grid-column-start: 1;
  grid-row-start: 1;
}

こうすることで、先ほどの画像と同じ1×1マスの格子の中央に説明文が配置されます。

つまり、この時点で画像の中央に説明文が配置されたので、目標達成です！

形を整える

では最後に理想の形に近づけていきます。

style.css

.card-description {
  justify-self: center;
  align-self: center;
  grid-column-start: 1;
  grid-row-start: 1;
  /* 説明文の背景色を灰色にする */
  background-color: grey;
}

.card-description-title {
  /* 説明文の見出しを中央揃えにする */
  text-align: center;
}

完成です！
画面幅を変更しても、説明文が画像の中央をキープしてくれます。

最終的なコードはこちらになります。

index.html

<div class="card">
  <img class="card-image" src="" alt="" />
  <div class="card-description">
    <h2 class="card-description-title">Heading</h2>
    <p class="card-description-text">テキストテキストテキスト</p>
  </div>
</div>

style.css

.card {
  display: grid;
}

.card-image {
  justify-self: stretch;
  grid-column-start: 1;
  grid-row-start: 1;
}

.card-description {
  justify-self: center;
  align-self: center;
  grid-column-start: 1;
  grid-row-start: 1;
  background-color: grey;
}

.card-description-title {
  text-align: center;
}