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