ブログなどのトップページやアーカイブページなどでよく実装されているタイルレイアウトですが、以前ではdisplay: flex;を使っていました。
最近では、メディアクエリでわざわざ分岐点（ブレイクポイント）ごとにCSSファイルに書き込みをしなくてもレスポンシブにも対応できるdisplay: gridを使っているケースが多く見受けられます。
さらに、2023年にはChromeやEdge、Firefox、Safariといった主要ブラウザで対応可能となったsubgridを使うことでタイルレイアウトをより見栄えの良いものにできるようになりました。
今回は、subgridでどんなことができるかの例をご紹介したいと思います。
subgridを使う前のタイルレイアウト
このブログのトップページとアーカイブページの記事一覧表示にはdisplay: gridを使用しています。
画像を見ていただくとお分かりかと思いますが、「投稿日」と「カテゴリー」の表示位置がタイトルの長さによって高さがバラバラになってしまっています。
スマホで見る場合は、カラムが落ちて1カラムになるので多少高さがバラバラであっても問題ないのですが、PCで見ると微妙に気になるというか気に入らないなあと感じていました。
subgridでタイル内の高さを揃える
主要ブラウザがsubgridに対応したということなので早速使ってみました。
タイトルの長短に関係なく横列の「投稿日」と「カテゴリー」の高さが同じになりました。高さを揃えるために書いたコードはこちらです。
.child-wrap{
display: grid;
grid-template-rows: subgrid;
grid-row: span 3;
row-gap: 0;
}grid-template-rows: subgrid;にすることでタイル内の各要素の開始位置を揃える準備ができました。もうひとつ重要なのがgrid-row: span 3;です。
まずは下の画像をご覧ください。
タイル内は画像・タイトル投稿日カテゴリーといった3つの要素で構成されています。
ですのでgrid-row: span 3;と指定して各要素の開始位置が揃うようにしています。
例えば、「画像」「タイトル」「投稿日」「カテゴリー」といった感じで4つの要素に分かれている場合はgrid-row: span 4;といった感じで指定します。
ザックリとした説明でしたが、なんとなくどのような動きをするかお分かりいただけたのではないでしょうか？
以前であれば、この高さを揃えるためにjavacriptを使って高さを計算して…といったことをしていたのですが、非常に便利な時代になりました。
もしまだsubgridを使っていないのであれば、これを機会に取り入れてみてはいかがでしょうか。