CSSのsubgridがすべてのブラウザにサポートされたので、カード内の見出しやテキストを簡単に揃えることができます

先日の記事（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以前は、

[coliss]

CSSのサブグリッド（subgrid）を使用すると、子要素（画像・見出し・テキストなど）の水平グリッドも簡単に揃えることができます。

[nakag0711]

時代がやっとtableレイアウトに追いついたか

[mokkoda4]

これは使うことになりそうだからブクマしなければ。

[mori_oh]

"すべてのブラウザに"おおっと大きく出たな…ないのもあるぞ( https://lynx.invisible-island.net https://sourceforge.net/projects/w3m/ )と思って本文見たが主要ブラウザって書いてあった…その2文字を何故タイトルに入れられないのだ

[uzuki05]

便利“CSSのサブグリッド（subgrid）を使用すると、下記のように子要素（画像・見出し・テキスト）の水平グリッドも簡単に揃えることができます。”

[tockri]

これで、やっとtableと同じくらいのことができるようになったね！

[solidstatesociety]

欲しかったやつ

[gyampy]

良さそう

[poad1010]

この記事をおすすめしました