はてなブックマーク

はじめに CSSのSubgridは2019年に全主要ブラウザへの対応が完了し、TailwindCSSはv3.4系のリリースで対応が完了しました。 改めて使いたい場面や使い方を整理したいと思ったのでまとめています。 【参考】 Subgridとは CSS Gridでは親要素（グリッドコンテナ）と子要素のレイアウトはそれぞれ独立したルールになります。 しかし、subgridを使うと、子要素が親要素のルールを引き継ぐことができます！ 例えば、親要素が3つの列を持っている場合、子要素もその列にピッタリ合わせることができます。 どんなときに使う？ 親子関で整ったレイアウトを作りたいとき 親と子で同じ列幅や配置を使いたいとき コードをシンプルにしたいとき 文章で書いてもわかりにくいので、実際のコードを元に説明します。 実際に書いてみよう SubGridを使わなかった場合 <div class="grid