要素の幅が可変の時、どうやって幅をそろえるか
要素の内容によって幅が変わる場合、見た目をきれいにそろえるのは意外と難しいものです。
たとえば「日付」「カテゴリタグ」「タイトル」といった要素が横並びになっていると、文字数の違いで揃わなくなることも。
例えばこのデザインを実装しようと、HTMLとCSSを以下のように記述しました。
<div class="topics-list">
<article class="topics-item">
<time datetime="2024-08-01" class="topics-date">2024年8月1日</time>
<span class="topics-tag">ニュース</span>
<h2 class="topics-title">
<a href="#">夏のイベント開催レポート</a>
</h2>
</article>
<article class="topics-item">
<time datetime="2024-07-15" class="topics-date">2024年7月15日</time>
<span class="topics-tag">ニュース</span>
<h2 class="topics-title">
<a href="#">公式サイトをリニューアルしました</a>
</h2>
</article>
<article class="topics-item">
<time datetime="2024-07-01" class="topics-date">2024年7月1日</time>
<span class="topics-tag">リリース情報</span>
<h2 class="topics-title">
<a href="#">次世代型プロジェクト「X-Track」を発表</a>
</h2>
</article>
</div>.topics-item {
display: grid;
grid-template-columns: auto auto 1fr;
gap: 24px;
align-items: center;
padding: 20px 0;
border-bottom: 1px solid #ccd2d9;
}
.topics-date {
font-size: 15px;
font-weight: bold;
color: #3b4252;
opacity: 0.5;
}
.topics-tag {
padding: 3px 10px;
font-size: 13.5px;
color: #4c6fa1;
text-align: center;
border: 1px solid #4c6fa1;
border-radius: 4px;
}
.topics-title {
font-size: 15.5px;
font-weight: bold;
color: #434c5e;
}gridを使って並べましたが、日付やタグ、タイトル等の文字数は変わってきますので、各要素の横位置が揃わないです。
See the Pen subgridで幅をそろえる by keiichisawai (@sawakei) on CodePen.
こんな時は、subgridが便利です。
subgrid ってなに？
subgrid は、親グリッドで決めた列幅を、子要素にもそのまま引き継げる機能です。
これにより、中身の要素数や文字数が変わっても、常に同じ位置にそろえることができます。
subgridを使って、幅をそろえる
以下が、subgridを使った、実際のコードです。(HTMLは同じです）
.topics-list {
display: grid;
grid-template-columns: auto auto 1fr;
}
.topics-item {
display: grid;
grid-template-columns: subgrid;
grid-column: 1 / -1;
gap: 24px;
align-items: center;
padding: 20px 0;
border-bottom: 1px solid #ccd2d9;
}
.topics-date {
font-size: 15px;
font-weight: bold;
color: #3b4252;
opacity: 0.5;
}
.topics-tag {
padding: 3px 10px;
font-size: 13px;
color: #4c6fa1;
text-align: center;
border: 1px solid #4c6fa1;
border-radius: 4px;
}
.topics-title {
font-size: 15px;
font-weight: bold;
color: #434c5e;
}See the Pen subgridを使って、幅をそろえる by keiichisawai (@sawakei) on CodePen.
固定幅を使えば見た目をそろえることはできますが、テキスト量が変わったときに対応しづらくなります。
subgrid を使えば、どんな文字数でも自然に揃う柔軟なレイアウトを作ることができます。
最後に
subgridを使えば、グリッドの列幅を親から子へ自然に引き継げるため、
「要素ごとの文字量が異なると揃わない」といった問題をスマートに解決できます。
対応ブラウザも整ってきた今、柔軟で保守性の高いレイアウト設計に取り入れてみる価値は十分あります。
