🃏
【CSS だけ】孫要素の高さを揃える Subgrid
カードが横並びになったとき、これまで孫要素の高さを揃える方法といえばflex-grow
がメジャーでした。
flex-grow
は設定する CSS が多く、書いていると頭がこんがらがってくるのであまり得意ではなかったのですがSubgrid
でも同じ効果を得られるとのことで、早速試してみます。
コード
結論のコードです。
<div class="l-container">
<div class="card__list">
<div class="card__item">
<div class="card__image">
<img src="./img/ebi.png" alt="" width="400" height="396" />
</div>
<h2>カードのタイトル<br />カードのタイトル</h2>
<p>カードのテキストカードのテキストカードのテキストカードのテキスト</p>
<div class="card__button">
<a href="" class="card__button--blue">続きを読む</a>
</div>
</div>
<div class="card__item">
<div class="card__image">
<img src="./img/ebi.png" alt="" width="400" height="396" />
</div>
<h2>カードのタイトル</h2>
<p>カードのテキスト</p>
<div class="card__button">
<a href="" class="card__button--blue">続きを読む</a>
</div>
</div>
<div class="card__item">
<div class="card__image">
<img src="./img/ebi.png" alt="" width="400" height="396" />
</div>
<h2>カードのタイトルカードのタイトル</h2>
<p>カードのテキストカードのテキストカードのテキストカードのテキスト</p>
<div class="card__button">
<a href="" class="card__button--blue">続きを読む</a>
</div>
</div>
<div class="card__item">
<div class="card__image">
<img src="./img/ebi.png" alt="" width="400" height="396" />
</div>
<h2>カードのタイトル</h2>
<p>
カードのテキストカードのテキストカードのテキストカードカードのテキストカードのテキスト
</p>
<div class="card__button">
<a href="" class="card__button--blue">続きを読む</a>
</div>
</div>
<div class="card__item">
<div class="card__image">
<img src="./img/ebi.png" alt="" width="400" height="396" />
</div>
<h2>カードのタイトル</h2>
<p>カードのテキスト</p>
<div class="card__button">
<a href="" class="card__button--blue">続きを読む</a>
</div>
</div>
<div class="card__item">
<div class="card__image">
<img src="./img/ebi.png" alt="" width="400" height="396" />
</div>
<h2>カードのタイトルカードのタイトル<br />カードのタイトル</h2>
<p>
カードのテキストカードカードのテキストカードカードのテキストカードのテキストカードのテキストカードのテキスト
</p>
<div class="card__button">
<a href="" class="card__button--blue">続きを読む</a>
</div>
</div>
</div>
</div>
.l-container {
max-width: 1200px;
margin: 100px auto;
}
.card__list {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
gap: 40px;
}
.card__item {
display: grid;
grid-template-rows: subgrid;
grid-row: span 4;
gap: 20px;
background-color: #f0f0f0;
padding: 20px;
border-radius: 20px;
}
.card__item h2 {
font-size: 20px;
font-weight: bold;
}
.card__image {
text-align: center;
}
.card__image img {
width: 100px;
height: auto;
}
.card__button {
text-align: center;
}
.card__button--blue {
font-size: 16px;
color: #fff;
width: 100%;
display: block;
background-color: skyblue;
padding: 0.6rem 1.2rem;
border-radius: 100vw;
font-weight: bold;
}
HTML の解説
カードを囲むcard__list
の中に、カード本体であるcard__item
を入れました。
タイトルやテキストの長さをあえて変えて、孫要素の高さが揃うか試しています。
CSS の解説
カードを囲むcard__list
に、3つずつカードが並ぶようgrid-template-columns: repeat(3, 1fr);
を指定します。カードとカードの間をgap: 40px;
で指定し、隙間を開けました。
カード本体
カード本体にもdisplay: grid;
を指定し、高さを揃えるためのgrid-template-rows: subgrid;
を指定します。
さらに、何行分の高さを揃えるのかgrid-row: span 4;
で指定します。4にした理由は、カードの中身の行数が4だからです。
まとめ
flex-grow
よりシンプルに孫要素の高さを揃えられました。
カードの高さを揃えるのはよく使うので、これからはSubgrid
を使っていきます。
Discussion