CSS Grid Crash Course

Welcome back to another of my frontend web development crash courses. In today's course, we're going to learn CSS Grid. I want to approach this differently to other courses. CSS Grid can easily feel more complicated than it needs to be, so in my course, I'm going to teach you the basic concepts so that you can start using CSS Grid in your own projects. At the end of the course, we'll build 3 Grid challenges together as well.

Crash Course Resource Files
https://www.dropbox.com/s/ufvdeq7ag2hya9w/css-grid-resources.zip?dl=0

CSS Flexbox Crash Course
https://www.youtube.com/watch?v=9raMkQ7foOw

My Website
https://www.pixelrocket.store

Alpine Bootstrap HTML Template
https://github.com/PixelRocket-Shop/alpine-html-bootstrap

CSS Tricks Complete CSS Grid Guide
https://css-tricks.com/snippets/css/complete-guide-grid/

How To Enable Masonry In Firefox
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout

Timestamps
0:00 Intro
2:05 How to create a grid
2:50 Display grid property
4:40 Grid columns
6:15 Grid gap
9:50 Grid rows
13:30 Grid item placement
17:10 Grid template areas
19:50 Course projects