This video is by far the most comprehensive explanation of CSS Grid you’ll find anywhere on YouTube - it uses colourful diagrams and animations to break down the theory in an easy-to-understand way, as well as walk you through its application, step-by-step in a real-world web project.
0:00:00 Introduction
0:00:39 Introduction to Grid
0:14:23 Grid Columns and Rows
0:42:27 Grid Gap
0:53:08 Grid Cell Alignment
1:06:08 Grid Alignment
1:20:59 Grid Items
Download links:
Download Presentation Slides: https://drive.google.com/file/d/1UQZlLAiQEgX56ot65SuA79q49Rj8d9iT/view?usp=sharing
Download Summary Cards: https://drive.google.com/file/d/1WVjUN4MyGF_t0oHdM8M-ti0TOfnyMJYw/view?usp=sharing
Quill starter HTML & CSS: https://drive.google.com/drive/folders/1ZRZ66fEr86Aj7tlbcz5TFvjmo25G8qO_?usp=drive_link
Video Links:
Quill Project: https://www.youtube.com/watch?v=rCtnfawtQQs
CSS Flexbox: https://youtu.be/-G-zic_LS0A?t=34277
CSS Media Queries: https://youtu.be/1ra4yeyjFFc?t=11523
CSS Rem Values: https://youtu.be/-G-zic_LS0A?t=30367