横並びレイアウトでテキスト量が変わっても要素の高さを揃える方法

こんにちは、KNAPの足立です。
今回は横並びのレイアウトの際にテキスト量に応じて高さを揃えるcssのsubgridについてご紹介します。

subgrid指定なしの横並びレイアウト

See the Pen subgrid_none by knap_develp (@knap_develp) on CodePen.

subgridを指定せずの場合、テキスト量によってレイアウトの統一性が保たれなくなってしまう場合があります。
ここでどんなテキスト量でも統一性を保つためにcssのsubgridを使用します。

subgrid指定ありの横並びレイアウトはこちら

See the Pen subgrid by knap_develp (@knap_develp) on CodePen.

高さを揃えるレイアウトを実現するためには.l-grid_itemに下記の２つを挿入します。

  grid-template-rows: subgrid;
  grid-row: span 4;

grid-row: span 4;の4はどこからきているのかと言うと、l-grid_itemの要素数から来ています。（見出しと画像とテキストとボタン）これを指定することにより各横並び要素の高さを確保してくれます。

subgridの登場によって横並びのレイアウトの調整がやりやすくなりました。
良かったら使ってみてください。
※ブラウザのバージョンによっては使用できないものもあるのでご注意ください。