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

Transcript

2. @tonkotsuboy_com 鹿野 壮
4. 01 そもそも、CSS Gridとは？
5. CSS Gridとは 「行列」を使ったレイアウトのこと
8. エリア名を指定して要素を柔軟に配置
9. 行列を繰り返したり、隙間をつくる
10. 行・列数を自動で変更したり、要素を敷き詰めたりする
11. 従来のブラウザで対応していたのは CSS Grid Layout Level 1 https://www.w3.org/TR/css-grid-1/
12. 従来の仕様だと難しいレイアウトがあった
13. ウインドウサイズ: 大 カードの列数を可変にし、カードの各要素の高さを揃えたい
14. ウインドウサイズ: 小 カードの列数を可変にし、カードの各要素の高さを揃えたい
15. 従来: CSSだけでは実現が不可能だった
16. JavaScriptを使って、行ごとの最大の高さを計算する 各行の高さを指定する ウインドウサイズが変わるごとに（あるいはブレイクポイントを 跨ぐごとに）高さを計算し直す 処理の負荷が高く、パフォーマンスの悪化につながる 従来: JavaScriptを使っていた
17. 02 行列の入れ子が全ブラウザで可能になった
18. ① 親行列をつくる
19. ② 子行列をつくる
20. ③ 親行列に子行列を配置する
21. 行列の入れ子が可能な CSS Grid Layout Level 2 subgrid https://www.w3.org/TR/css-grid-2/
22. 2023年9月にChrome・Edgeが対応し、全ブラウザ対応 https://caniuse.com/css-subgrid
23. Demo https://codepen.io/tonkotsuboy/pen/VwqmzeJ
24. HTML <div class="card-container"> <div class="card"><!-- 中略 --></div> <div class="card"><!-- 中略 --></div> <div class="card"><!-- 中略 --></div> <div class="card"><!-- 中略 --></div> <div class="card"><!-- 中略 --></div> </div> 1.HTMLのコーディング（親Grid）
25. HTML <div class="card"> <h2 class="card-title">Feeling Good</h1> <img class="image" src=" 画像パス" /> <p class="description">I AM A CAT. As yet I have no name.</p> <div class="label">Goods</div> </div> 1. HTMLのコーディング（子Grid）
26. CSS .card-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); } 2. 親要素をCSS Gridで配置する
27. CSS .card { display: grid; grid-template-rows: subgrid; grid-row: span 4; } 3. 子要素をCSS Gridで配置する
28. CSS .card-container { gap: 40px; } 4. 親行列で要素間の隙間（gap）を指定する
29. CSS /* 親のgap */ .card-container { gap: 40px; } /* 子のgap */ .card { row-gap: 12px; } 5. 子行列で要素間の隙間（gap）を指定する
30. DevToolでデバッグする
31. 03 Subgridの活用例
32. 画像のキャプションの高さを揃える https://codepen.io/michellebarker/pen/abVqwoK
33. 12分割グリッドシステムを作る https://codepen.io/brianhaferkamp/pen/XWXEbPp
34. 04 まとめ
35. CSS Gridは行列を使ったレイアウト Subgridを使えば、行列を入れ子にできる 2023年9月から、Chrome・Edge含めて全ブラウザ対応 さまざまな行列レイアウトに活用できる
36. 新しい知識を取り入れて 楽しくラクにウェブ制作をしましょう
37. 記事でも詳しく解説しています https://zenn.dev/moneyforward/articles/css-subgrid-all-browsers