gridについて学んでいる際に便利なテクニックを知ったので、備忘録として残したいと思います。
こういうのが作りたい
以下の図のように、画像の中心に説明文を配置したい。
position:relativeだと上手くいかない
画像の中心に説明文を配置する方法について調べてみると、
親要素に position: relative;
子要素に position: absolute;（今回の場合は中央にしたい説明文に対して）
を設定。
さらに子要素に top: 50%; や left: 50%;
などを追加していく方法が紹介されていたので試したのですが、
画面の幅を変えると説明文が中央からずれてしまい、
レスポンシブ対応が上手くいきませんでした。
gridだとシンプルかつレスポシブル対応が簡単
そこで登場するのがgridです。
親要素をgridコンテナー
子要素をgridアイテム
として、子要素を同じ格子（場所）に配置することで、
子要素を重ねることができます。
HTML
まずはHTMLからです。
今回はこの画像と説明文の１つの組み合わせをclass="card"とします。
<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を使用します。
.card {
display: grid;
}
これだけで親要素のclass="card"がgridコンテナーとなり、
子要素がgirdアイテムとなったため、自由に配置していくことができます。
CSS 画像の中央に説明文を配置
それでは画像の中央に説明文を配置していきます。
まず画像についてです。
.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;
}
こうすることで、先ほどの画像と同じ1×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;
}
完成です！
画面幅を変更しても、説明文が画像の中央をキープしてくれます。
最終的なコードはこちらになります。
<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>
.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;
}