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