Learn CSS Grid in 20 Minutes

🚨 IMPORTANT:

In this video we will cover everything you need to know about CSS grid in only 20 minutes. We will cover what grid is, how grid differs from flexbox, how grid works, and the different properties you can use to layout and style your grid containers and items. CSS grid is one of the most powerful layout tools ever added to CSS. It allows you to create dynamic, responsive, and complex layouts with very little code. We will be covering all of the terminology, by going through live examples of all the different grid properties.

If there is anything you feel I missed in discussing grid, or anything about grid that confused you, please let me know in the comments below.

Learn Flexbox in 15 Minutes:

CodePen for this Video:

Twitter:

GitHub:

CodePen:

#CSSGrid #WebDevelopment #Programming

[WebDevSimplified]

If you haven't already, make sure to checkout my Flexbox tutorial. It will make following along with this video much easier.

[sandyjameslord]

Excellent advice at 17:47 :"Flexbox and grid were designed so they would work amazingly together, and using flexbox items inside of your grid containers is one of the best ways to lay out a site." Thanks for your examples and your expert advice. Great work Kyle.

[tuantranluuquoc]

what truly sets your tutorial apart from other coding tutorial is the pace. Yours is not too fast, or too slow, just the right amount of pace to attracts learners' attention, but not to much so that you won't scare learners away. Nice tutorial, brother!!!

[zombiefacesupreme]

Putting in grid-gap before explaining how the column-end count works was a brilliant move because it really helped illustrate how that was included in the count. What a great video!

[ChantingInTheDark]

For those wanting to know how the DIVs are auto-numbered, it's these styles which are in the background_styles.css file (which isn't shown in the video but is available in the CodePen example)

.grid-item::before {
content: 'Grid Item';
position: absolute;
font-size: 18px;
font-weight: bold;
top: 10px;
left: 15px;
}

.grid-item::after {
position: absolute;
font-size: 18px;
top: 10px;
right: 15px;
font-weight: bold;
}

.grid-item-1::after {
content: '1';
}

.grid-item-2::after {
content: '2';
}

Etc.

[AitorMorgado]

One of the best coding tutorials out there. Amazing job, my friend.

[amazing-ekuo]

I have watched both flexbox and grid from your channel. Easy to understand, very clear and not at all verbose. Thank you bro for making me love with css.

[nigelnovak]

Hey Kyle, so glad I found your channel. The explanation of grid is amazing! Clear, concise and fast. Love your work. Big thanks!

[farn]

dude, best description of how to use it i've seen so far. will be checking out your other vids to brush up on my front end chops.

[Coronerlex]

You have no idea how much this video helped. I was trying to line up 5 tiles of images with links on my website for a class project. I couldn't get them to work then I found your video! By the end I had them laid out EXACTLY how I wanted. I wish I would've found this hours again. Thank you so much!

[LeSaboteur]

My professor explained this so bad in two hours and I didn't had a clue what he was talking about.. after 20min watching you, it feels natural and easy! Thanks!

[sonotsoma]

The amount of extremely useful information you always manage to squeeze into such a small amount of time is amazing! Thank you!

[ladannazary]

I looked at MANY videos on Udemy and on Youtube to learn about css grids. This one was the best one I've found. Explains the concepts in a way that are so easy to follow and understand. Thank you!!

[semaytube]

You've got a great talent bro, not just your codding skills and knowledge but also your easy-to-understand way of teaching. I've watched a couple of your videos and I found them really helpful. Thank you😍 so much for sharing your talent with us at no cost.

[alexisgono]

THANK YOU!!! 😭
Ive been struggling for weeks to make a site work hat has both columns and rows and have watched countless flexbox videos trying to make that alone work.
You dont know what you dont know until you know🤷‍♀
This video has just unlocked a higher level for me.
Truly appreciate your content.
Keep up the good work.
👍🏽👍🏽👍🏽👍🏽👍🏽👍🏽

[zeppelin]

This is just beautiful. In just 10 minutes, I was able to learn enough for my immediate purposes. Thanks.

[protical]

This was by far the best explanation on using css grids I have spent 5 hours+ looking for a video like this. Keep up the great work this is amazing!

[FredericGuimont]

Great summary, easy to grasp and short enough to fit in my schedule. Thanks!

[fszttkq]

The best explaination of css grid on YT, came here after getting confused by other vids. Thanks for another quality vid 🙏🏼🤙🏼

[xugestory]

Yout video are awesome, Love it so much. At first I am confuse between flexbox and css grid, but after watching your video, everything is cleared!