CSS Subgridが遂に全ブラウザ対応。新時代のグリッドデザインを学ぼう

TechFeed Experts Night#26 〜 Web標準技術最前線 ー HTML/CSS/JSの「いま」で発表したスライドです。 https://techfeed.io/events/techfeed-experts-night-26 Zennの記事でも詳しく解説しています。 → CSSのSubgridが全ブラウザ対応。Gridの入れ子の基本から応用までを完全理解する https://zenn.dev/moneyforward/articles/css-subgrid-all-browsers

[monacal]

Flexで出来るっていう人は多分、文字量にあわせてタイトルボックスを自動で広げる、同じ行に並ぶカードはボックスの高さを（最大文字量に合わせて）揃える、の仕様が抜けてると思うよ。固定高ならそりゃ簡単。

[kvx]

「CSSだけでは実現が不可能だった」ページを見よう。flexでは対応出来ない。

[kijtra]

この例示だと flex で対応できちゃいそうだけど、親要素で子の挙動を指定できるのが強いって感じなのかな

[eschan]

これをflexではなくgridで制作するメリットってなんでしょう。また最新のブラウザでは対応したとしても一般ユーザーが最新のブラウザに更新して使用してるとは思えないのでまだ気軽には導入できない。

[suzuki_torakichi]

不同の縦幅の行が複数ある場合、flexで対応できますかね？　ともあれ、古のテーブルレイアウトが20年かけて進化してきた感があり笑

[mr_mayama]

どうしてもテーブルレイアウトを思い出しちゃう/flex云々言ってる人はCSSの描画パフォーマンスを考えてみよう

[tikusieg]

実務経験の物差しになってないかこれ/「floatでよくね？」

[kuracom]

gapすら非対応の端末がそこそこ生きてて、subgridをスッキリ使えるのは2年後くらいになりそう

[sig]

[[css]grid]

[asiamoth]

“全ブラウザ対応”！ ※なお、Global 55%・日本60%な模様。 https://caniuse.com/mdn-css_properties_grid-template-columns_subgrid

[akulog]

弊社はIE6なんですがーってとこまだある？

[GiveMeChocolate]

試す

[lb501]

Safari on iOS16.1

[spark7]

痒いとこに手が届く感じだな。あとflex云々は的外れだろう。

[nekosann_08]

子要素の内容量によるデザイン上のブレをシンプルな書き方で抑えやすいって事かな。従来だと親はともかく子までデザイン的統一感を目指すとCSSが分厚くなるか何かを諦めるような書き方をするか、だったから。

[Shinwiki]

Chrome対応してなかったのかwwww使ってたわwwwwwイントラだから別にいいけど