くまだどうも、くまだです。
カード系のアイテムで、アイテムの中のテキストやaタグなどが下部にあるコンテンツを下部で固定する方法。
カード系の中のコンテンツを下部固定
最初に下部固定でないパターンから。
上みたいな配置で「詳細を見る」が下部にあるパターン。こちらのコードは下です。
<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__link-wrap {
margin-top: 10px;
}
.p-card__link {
padding: 8px;
display: inline-block;
background: yellow;
}
テキストが増えると「詳細を見る」の位置がバラバラ。デザインによっては、ここもきれいに下部に揃えたいときもあります。
なので、例えば以下のように書き換え。
.p-card__link-wrap {
margin-top: auto;
}
これで「詳細を見る」は下部にそろいます。ただ、テキストが長いとき「詳細を見る」との間に余白がないように見えます。ここでmargin-topをautoではなく10pxとか値を持たせてしまうと、今度は「詳細を見る」の位置がそろわなくなる。
なので、次のように修正。
.p-card___text {
flex-grow: 1;
}
.p-card__link-wrap {
margin-top: 10px;
}テキストと「詳細を見る」間の余白を確保しつつ、テキストにはflex-growを指定して、カード内の余った余白をテキストに配分して伸ばす（イメージ）。
「詳細を見る」を下部に固定しつつ、テキストとの間も余白確保。
ここまで読んでくださりありがとうございました。