📘
Flexより簡単？Gridで実現する画像＋テキストの縦中央揃え
テキストと画像の中央揃え、まだFlexで頑張ってる？Gridにおまかせ！
「画像とその横にあるテキストを上下の中央に揃えたい」
Web制作をしていると、何度も遭遇するこのレイアウト。
Flexbox でももちろんできますが、Grid を使うともっとシンプルかつ正確に、意図通りに実装できる場面が多いんです。
この記事では、そんな「画像＋テキストの縦中央揃え」を、Gridを使ってスマートに実装する方法に加え、
スマホ対応（SPでの縦並び）や、最近よく見る**「リード文を…で省略する」テキストのレイアウト**についても、実例コードと共に紹介します。
✅ よくある「画像＋テキスト」横並びレイアウト
<div class="card">
<img src="sample.jpg" alt="画像" class="card-image">
<div class="card-content">
<h2>タイトル</h2>
<p>リード文や説明文がここに入ります。</p>
</div>
</div>
Flexで .card に align-items: center を指定すると、
テキストブロック全体が中央に来ないこともあり、微妙な調整が必要です。
✅ Gridで縦中央揃えを解決！
.card {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 1rem;
}
.card-image {
width: 80px;
height: 80px;
object-fit: cover;
}
✅ スマホ対応：SPでは縦並びに
@media (max-width: 768px) {
.card {
grid-template-columns: 1fr;
}
.card-image {
width: 100%;
height: auto;
}
}
✅ 応用編：リード文が長いと…で省略される表現
最近のブログカードでよく見かけるこのレイアウト。
**「1行だけ省略」と、「複数行で省略」**の2パターンがあります。
🅰️ 1行だけを省略（末尾に ...）
.text-ellipsis-single {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
💡 実際のサンプル
.sample-box {
width: 300px;
border: 1px solid #ccc;
padding: 1em;
font-size: 14px;
margin-top: 1em;
}
.text-ellipsis-single {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<div class="sample-box">
<p class="text-ellipsis-single">
これは非常に長いテキストで、1行に収まりません。省略されるはずです。
</p>
</div>
🅱️ 複数行（例：3行）を省略
.text-ellipsis-multiline {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
💡 実際のサンプル
.text-ellipsis-multiline {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 14px;
width: 300px;
border: 1px solid #ccc;
padding: 1em;
margin-top: 1em;
}
<p class="text-ellipsis-multiline">
これは複数行のテキストを省略する例です。
よくブログのリード文やお知らせの抜粋などで見かけるやつですね。
3行以上になると末尾が「...」で切られます。
実際にこのテキストも、長ければ省略されて見えるはずです。
</p>
✅ まとめ
- Gridを使えば「画像＋テキスト」の縦中央揃えがシンプルに実現できる
- SP版への対応も
grid-template-columnsを切り替えるだけで簡単 - よくあるリード文の省略も、1行／複数行でしっかり対応可能
- Flexでハマる前に、一度Gridでのレイアウトを検討してみましょう！
Discussion