Build Layouts with CSS Grid #2 - Multi-Column Layout

Hey gang, in this Css Grid tutorial we'll create a multi-column layout

⭐⭐ Get the full course now (without ads) on the Net Ninja Pro site:

⭐⭐ Get access to all free & PREMIUM courses on Net Ninja Pro:

🐱‍💻 Access the course files on GitHub:

🐱‍💻 CSS Grid Course:

[samnako]

I sincerely want to appreciate you for the great content you publish, i have advanced my learning significantly especially on php. You are so amazing. Language is extraordinarily excellent. I can't thank you enough. THANK YOU A MILLION TIMES. From: Lagos, NIGERIA

[mathis-meth]

Synchronicity with the universe is like one of my fav youtubers posting about layouts which I'm learning right now

[TheLabbening]

Thank you helped me tons to understand containers
Champy

[poliovei]

Magistral!! 👏👏👏 simple and clear. This world need people like you.
Grettings

[I-webdesignerCoUk]

Just a suggestion - add this to the images to get them all even.

img {

object-fit: cover;
aspect-ratio: 16/9;

}

Choose whichever aspect ratio you prefer. But it will ensure the width and height of each stays the same.

[Bryan-tmkd]

Your tutorials are pretty well put together. I always learn a bunch from them...

[gagysada]

Brother your channel is fantastic, I believe you can be a great teacher at a high ranked university, the way you explain is reaching to the brain cells in split seconds, please keep the good work

[elijahbarinov]

Oh, I've just finished learning js basics and have to refresh my html & css knowledges and these lessons are just at a time!
Btw I finish your Golang guide, love your guides so much. Thank you!

[RazorShultzor]

I finally managed to make a simple landing page. I've tried in various years, at multiple points, but i finally designed something halfway cool thanks to this video. I can do C# but I could never make anything in CSS that was halfway decent until now. Thanks. I'm about to check out the astro vids you've got too, they look awesome

[mandisamoffat]

What an excellent tutorial. You made sure every step was easy to follow . Thank you so much!

[tonytony-fcgq]

im a pro member and will be watching all of these . PRO MEMBER RECOMMENDED

[emmanuelogunleye]

You have the best contents ever, your explanation of concepts is have no match, we are happy to have you in web development world… KINGLEO

[Banusrisathyan]

Very clearly explained with examples, thank you sir!!!

[Cassandra]

This really helped me understanding the concepts, thanks a lot!

[abhijithsubash]

Thank You Very Much.
Your contents are awesome.
I like the project based learning other than just about the methods.

[evilservo]

Shaun is they guy that i learned my first line of code to write so I am feeling very little to actually even give a suggestion but instead of working with pixels its much better to work with em and rem because they are gonna mantain in same ratio across all screens sizes

also do this at the beging of css files
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

this what essentially does is strip any margin or padding injected by browser and your design will look fairly same across all browser this also make computation of borders, margins and padding easy

[Guyfromearh]

Hey there!
Thanks so much.🎉
It's been so beneficial.

[maxthedevp]

really cool video ! Keep it up, you are doing a great job, hoping to become a good programmer-entrepreneur one day!

[JorgeDiz-sj]

You asign Max-width to Main, but on the style you can see that is not touching the margins when 1200px should be the full screen....is it that the margin reduce the maximium of the width?

[AndyMorrisArt]

Any particular reason to not just use 6 columns? Both 2 and 3 easily fit into it.