先日の記事(Chrome 117でサポートされたCSSの6つの新しい機能とプロパティ)で触れましたがCCSS Gridのsubgrid値が、grid-template-columnsとgrid-template-rowsの2つで設定できるようになりました。Safari, Firefoxではすでにサポートされていたので、これで主要ブラウザのすべてで利用できます。 CSSのサブグリッド(subgrid)を使用すると、下記のように子要素(画像・見出し・テキスト)の水平グリッドも簡単に揃えることができます。 CSSのサブグリッド(subgrid)で子要素のグリッドを揃える CSSのサブグリッド(subgrid)のサポートブラウザ デモページの解説 CSSのサブグリッド(subgrid)で子要素のグリッドを揃える 3つのカードがあり、それぞれに画像・見出し・テキストがあります。subgrid以前は、
![CSSのsubgridがすべてのブラウザにサポートされたので、カード内の見出しやテキストを簡単に揃えることができます](https://cdn-ak-scissors.b.st-hatena.com/image/square/10179d817a4e9808cbe9cbe1555b8b3ad0a8896d/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202304%2F2023100110%402x.gif)