くまだどうも、くまだです。
CSSのsubgridの余白についてのメモ。（subgridの詳しい使い方ではないです）
subgridの余白
例えば以下のようなカードがあったとして、
<div class="grid">
<div class="box">
<div class="box__img">
<img src="images/dummy.jpg" alt="">
</div>
<h3 class="box__title">みだし</h3>
<p class="box__text">てきすとてきすと</p>
</div>
<div class="box">
<div class="box__img">
<img src="images/dummy.jpg" alt="">
</div>
<h3 class="box__title">みだし</h3>
<p class="box__text">てきすとてきすと</p>
</div>
<div class="box">
<div class="box__img">
<img src="images/dummy.jpg" alt="">
</div>
<h3 class="box__title">みだし</h3>
<p class="box__text">てきすとてきすと</p>
</div>
</div>
.grid {
display: grid;
gap: 40px;
grid-template-columns: repeat(3, 1fr);
}
.box {
display: grid;
border: 1px solid #000;
}
.box__img {
aspect-ratio: 16 /9;
}
.box__img img {
object-fit: cover;
height: 100%;
}
Gridでたんに並べただけですが、もし見出しやテキストがカードごとに長さが異なる場合は、以下のような表示になり、見た目が崩れてしまいます。
上記を、画像と見出し、テキストでそれぞれ頭の部分をそろえたい。その場合は「subgrid」を使います。
.box {
display: grid;
border: 1px solid #000;
/* 以下追記 */
grid-template-rows: subgrid;
grid-row: span 3;
}
それぞれの頭の部分がそろいました。grid-row: span 3; で親要素の3行分の高さになります。
画像と見出し、見出しとテキスト間の余白は、「親要素のgapの余白」がそのまま継承されているので、subgridした要素にも別途row-gapを指定して上書きしてあげます。
.box {
display: grid;
border: 1px solid #000;
grid-template-rows: subgrid;
grid-row: span 3;
/* 以下追記 */
row-gap: 10px;
}
こんな感じです。
行ごとの余白がめちゃくちゃ広がっている場合は、親要素で指定したgapの余白を引き継いでいる可能性が高いので、忘れずにsubgridでもgapを指定する。
ここまで読んでくださりありがとうございました。