くまだどうも、くまだです。
カード系のアイテムで、タイトルの行数が変わっても下部にあるコンテンツをそろえる方法。
なお、コードはこちらの記事から使いまわし。
カード系コンテンツのタイトル下部をそろえる
例えば以下のような配置とコードのとき。
<ul class="p-cards">
<li class="p-cards__item p-card">
<div class="p-card__img">
<img src="images/dummy.png" alt="">
</div>
<h3 class="p-card__title">タイトル</h3>
<p class="p-card___text">抜粋が入ります。抜粋が入ります。抜粋が入ります。抜粋が入ります。抜粋が入ります。</p>
<div class="p-card__link-wrap">
<a href="" class="p-card__link">詳細を見る</a>
</div>
</li>
<li class="p-cards__item p-card">
<div class="p-card__img">
<img src="images/dummy.png" alt="">
</div>
<h3 class="p-card__title">タイトル</h3>
<p class="p-card___text">抜粋が入ります。抜粋が入ります。抜粋が入ります。抜粋が入ります。抜粋が入ります。</p>
<div class="p-card__link-wrap">
<a href="" class="p-card__link">詳細を見る</a>
</div>
</li>
<li class="p-cards__item p-card">
<div class="p-card__img">
<img src="images/dummy.png" alt="">
</div>
<h3 class="p-card__title">タイトル</h3>
<p class="p-card___text">抜粋が入ります。抜粋が入ります。</p>
<div class="p-card__link-wrap">
<a href="" class="p-card__link">詳細を見る</a>
</div>
</li>
</ul>.p-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 10px;
row-gap: 10px;
}
.p-card {
display: flex;
flex-direction: column;
height: 100%;
position: relative;
}
.p-card__img {
width: 100%;
display: block;
}
.p-card img {
width: 100%;
height: 100%;
display: block;
}
.p-card__title {
font-size: 20px;
}
.p-card__link-wrap {
margin-top: 10px;
}
.p-card__link {
padding: 8px;
display: inline-block;
background: yellow;
}
.p-card___text {
flex-grow: 1;
}
.p-card__link-wrap {
margin-top: 10px;
}
いまはタイトルの行数が1行なので、タイトル直下の抜粋はそろっていますが、もしこれが複数行になった場合、以下のようになってしまいます。
例えば、ここでタイトル部分に行数制限をいれてみる。
.p-card__title {
font-size: 20px;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
2行以上になったら「…」になるように調整。しかし、これでも抜粋部分がそろっていません。場合によってはここもそろえたい。
なので、flex-basisを追記。値には2行分のスペースを確保するように調整します。
.p-card__title {
font-size: 20px;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
flex-basis: 60px; /*追記*/
}
これでタイトル下部の抜粋部分がそろいました。テキスト量が多いときは行数制限のCSSで調整し、テキスト量が少ないときは上記の対応で。
ここまで読んでくださりありがとうございました。