【HTML/CSSレイアウト】Gridを使うとFlexboxより簡単に複雑なレイアウトを組めます【ヤフー出身エンジニアの初心者向けプログラミング講座】

CSS Grid Areasを使ったレイアウトが便利で、皆さんに紹介したいと思って講座を作りました。
非常に簡単にデザイン構築ができるので超オススメです。ぜひ使ってみてくださいね。
👇 メリット
1: HTMLの不要なdivが消えます
2: Grid内の子要素のCSSがシンプルになる
3: レスポンシブデザイン対応が簡単
4: 視覚的に分かりやすくデザインできる
5: marginで悩む必要がない

🐙 GitHub（使用したコード）
https://github.com/lightsound/html-css-class/tree/master/002b_%20HolyGrail-grid

📙 もくじ
0:00 前回の聖杯レイアウトをおさらい
2:22 Gridを使うと余計なdivタグが消えます
3:11 Gridを使って聖杯レイアウトを作り直し
5:23 grid-template, grid-areas の解説
6:25 height の指定方法について
8:10 width の指定方法について
9:53 レスポンシブ対応
12:51 gap プロパティについて紹介
13:41 実践で使っている余白テクニックを紹介
16:05 ＋αで外周にも余白を指定するテクニック
18:01 grid-template で使える単位の話
18:40 便利な単位 minmax について紹介
20:31 gridのエリアを使ったメリットまとめ
21:05 GitHubで今回使用したコードを見る方法を説明
21:29 grid-template の対応ブラウザの話
21:52 まとめ

🔥この動画だけは見よ！
【HTML/CSSレイアウト #1】
実践的かつデザインも学べるレイアウト講座を開講します
https://youtu.be/BOWH_7BpO8Q

【HTML/CSSレイアウト番外編】
コーディングに便利なChrome拡張機能を作りました
https://youtu.be/CXrW5rqP-WY

【HTML/CSSレイアウト】
聖杯レイアウトのコーディング実践、デザイン解説
https://youtu.be/XrFD_0Pr6Nc

👨‍💻 自己紹介
ヤフー株式会社でプログラマーとして働いていました！
現在は起業家として新規サービスを開発中です！
下記に興味がある方はチャンネル登録をおねがいします！
・IT業界、Web系、プログラミング講座
・リモートワーク、在宅勤務、副業
・スタートアップ、ベンチャー、経営者、社長

🌏 SNS
Twitter: https://twitter.com/shimabu_it
Instagram: https://www.instagram.com/shimabu_it

🏷️ タグ
#Grid #Webデザイン #コーディング