CSS Grid Course

The course contains three sections. The first two will teach you the core concepts you need to know to get started. Together, we’ll build both a website layout and a super cool image grid. In the bonus section, you’ll learn how to create article layouts with CSS Grid plus some more advanced concepts.

⭐️Full content overview⭐️

⌨️ 0:01 1. Course Introduction
⌨️ 4:47 2. Your first grid
⌨️ 8:03 3. Fraction units and repeat
⌨️ 11:45 4. Positioning items
⌨️ 18:28 5. Template areas
⌨️ 23:18 6. Auto-fit and minmax
⌨️ 27:07 7. Implicit rows
⌨️ 29:06 8. An awesome image grid
⌨️ 35:56 9. Bonus: Named Lines
⌨️ 41:25 10. Bonus: Justify-content and align-content
⌨️ 44:17 11. Bonus: Justify-items and align-items
⌨️ 47:44 12. Bonus: Auto-fit vs. auto-fill
⌨️ 49:39 13. Bonus: Creating an article layout
⌨️ 57:37 14. Bonus: Grid vs. Flexbox

--

[DaevorTheDevoted]

0:01 1. Course Introduction
4:47 2. Your first grid
8:03 3. Fraction units and repeat
11:45 4. Positioning items
18:28 5. Template areas
23:18 6. Auto-fit and minmax
27:07 7. Implicit rows
29:06 8. An awesome image grid
35:56 9. Bonus: Named Lines
41:25 10. Bonus: Justify-content and align-content
44:17 11. Bonus: Justify-items and align-items
47:44 12. Bonus: Auto-fit vs. auto-fill
49:39 13. Bonus: Creating an article layout
57:37 14. Bonus: Grid vs. Flexbox

[HamidTalebiht]

I highly recommend seeing this course. He explains it as simple but so clear. After this course, you should practice and no need for any other course about GRID CSS.

[Freebird]

I've taken a few courses so far, trying to understand grid; but this is by far the best one so far. This guy gets it, and he teaches in such a clear and simple way. I've been on the hunt for a good boilerplate method for myself; and I just think I've found it. Thank you Per Harald.

[GabrielOkpo]

For people having issues with images not fitting into the grid, Per somehow forgets to add that you need to apply the following properties to the img tag

.container > div > img {
width: 100%;
height: 100%;
object-fit: cover;
}
for it to work well with all the images. Found that through the CSS Grid article he wrote on Medium, .
Hope this helps someone cos I was stuck too

[fredpourlesintimes]

I'm following your courses, and I have to say that - in particular for a french guy like me -, it's very helpful to find such good quality tutorials. In France, and I guess in some other non-english speaker countries equally, we're struggling a lot for finding concise, really explicite, captivating and entertaining teachings. At least for that, I'm pretty happy having learnt english and some other languages.

[dawinderkumarbhatoe]

best Explanation and visual examples on CSS grid ever, ive been watching so many tutorials, but this one was Best from all of it. thank you so much for this tutorial, it really helped alot.

[danielc]

The interactive version linked in the Description is awesome. Thank you!

[saintnity]

Cannot say thank you enough for this awesome CSS Grid course!!! Definitely one of the best out there.

[oufcena]

Grid blueprint

⌨️ 11:45 4. Positioning items
⌨️ 18:28 5. Template areas
---

Responsive layout with no media queries
⌨️ 23:18 6. Auto-fit and minmax
⌨️ 27:07 7. Implicit rows
---
Fill-up grid gaps in case of spanning items
grid-auto-flow: dense;
⌨️ 29:06 8. An awesome image grid
---
justify-content: space-evenly;
⌨️ 41:25 10. Bonus: Justify-content and align-content
---
You can get rid of that space by positioning spanning items & using z-index: -1; & self-align: end; & use padding
⌨️ 49:39 13. Bonus: Creating an article layout

[Lucifer_movies]

Hands on the best course on CSS grid ever !!!

[DiakoSharifi]

Thank you, it is one of the best tutorials about css grid.

[madhusudanrao]

This is how you teach. Have watched many. The best!!

[undudeme]

Quite possibly the best CSS Grid reference on Youtube.


Thank you so much. ☺

[dan-]

You guys deserve a medal or something. No wonder the like/dislike ration on this video is the way it is. Thanks a lot! My plan for today was to learn how lay-out things and after watching your video and alongside trying to tweak things I feel like I obtained a lot of knowledge on the subject. So cheers! Blessed be thy children !

[xtracodez]

This guy is amazing.He explains everything in detail and links theory with practical examples. :) Thumbs up.

[chotenque]

This is extremely eloquent. Thank you.

[alexuvarov]

wanted to add 10 extra likes, a very calm and detailed tutorial.

[angelasantos]

I am not a native speaker but I could understand every single word in this video. Wow. You are awesome. Excellent class.

[SimPwear]

Best CSS Grid Tutorial ever. Clear and to the point with great examples. Thank you so much for this. I can now use my newly acquired Grid knowledge with Flexbox .

[kasunjalitha]

Thank you so much! Best css-grid course.
grid-auto-flow: dense, grid-auto-row, minmax, auto-fit are great tools.... Just wow.
You have explained everything impressively.