TailwindでもSubgridを使ってみたい

はじめに

CSSのSubgridは2019年に全主要ブラウザへの対応が完了し、TailwindCSSはv3.4系のリリースで対応が完了しました。
改めて使いたい場面や使い方を整理したいと思ったのでまとめています。

【参考】

Subgridとは

CSS Gridでは親要素（グリッドコンテナ）と子要素のレイアウトはそれぞれ独立したルールになります。
しかし、subgridを使うと、子要素が親要素のルールを引き継ぐことができます！

例えば、親要素が3つの列を持っている場合、子要素もその列にピッタリ合わせることができます。

どんなときに使う？

• 親子関で整ったレイアウトを作りたいとき
• 親と子で同じ列幅や配置を使いたいとき
• コードをシンプルにしたいとき

文章で書いてもわかりにくいので、実際のコードを元に説明します。

実際に書いてみよう

SubGridを使わなかった場合

<div class="grid grid-cols-3 gap-4">
  <!-- カード -->
  <div class="grid gap-3">
    <h2 class="text-xl font-bold">見出し</h2>
    <div class="h-24 bg-slate-100"></div>
    <p>説明文が入ります</p>
    <button>ボタン</button>
  </div>
  <!-- カードここまで -->
</div>

<!-- ※本筋と関係のないスタイルは除外しています -->

この場合下記のような問題点があります。

• 見出しが2行になると水平ラインがズレる
• 説明文が2行になると水平ラインがズレる

このように、コンテンツの内容が異なる場合でもラインを揃えたい場合があります。
今まではJavaScriptなどを利用していましたが、subgridを利用すればCSSだけで解決できるようになりました！

SubGridを使った場合

<div class="grid grid-cols-3 gap-4">
  <!-- カード -->
  <div class="row-span-4 grid grid-rows-subgrid gap-3">
    <h2 class="text-xl font-bold">見出し</h2>
    <div class="h-24 bg-slate-100"></div>
    <p>説明文が入ります</p>
    <button>ボタン</button>
  </div>
  <!-- カードここまで -->
</div>

内部コンテンツの高さがバラバラでも、高さが揃うようになりました！

追加したクラスについての説明は下記です。

• grid-rows-subgrid: grid-template-rows: subgrid;
  • 子要素にsubgridを適応します
  • 親要素の行と揃えることができます
    • 列方向に揃えたい場合はgrid-cols-subgridを適応します
• row-span-4: grid-row: span 4 / span 4;
  • 親要素の4行分を使うことを示します
    • 今回は「見出し・画像・説明文・ボタン」の4行に分割できる
  • 列方向に揃えたい場合はcol-span-XXを適応します

おまけ：親のグリッドを可変にしたい時はどうする？

コンテンツが2つの時は2列にしたい…という場合はCSSだと下記のように書けます。

grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));

しかし、Tailwindの既存クラスでは表現できず、arbitrary valuesを使うしかありません。
その場合はTailwindのPluginを作成するなどしておくと便利に利用することができます。
subgridを活用していくのであれば用意しておくといいでしょう。

【参考】

終わりに

以上です。
何かの参考になれば幸いです！間違いがあればご指摘お願いします。