CSS Grid Layout Crash Course 

I took some notes from this one and I hope you don't mind if I post them here. Much gratitude to you, Brad. Thank you! * Difference btn flexbox and grid 1:00 * Simple layout example with main layout and side bar 2:50 * Make odd divs have alternative background color 4:11 * Define grid column widths (using percent) 5:10 * Grid gaps 7:04 * Define grid column widths (using fractions) 9:32 * Shorthand method for declaring fractions 10:46 * Declare div heights (all with same height) 12:00 *** (IMPORTANT!!!) Avoid content overflow with grid-auto-rows minmax 13:00 * Nested grids 14:00 * Set div heights within nested grid 15:25 * Align divs to left with justify-items: start 19:16 * Other horizontal align options 19:38 * Align divs vertically 20:00 * Align one div using align-self 20:58 * Grid lines intro 22:01 * Stretch div across 2 columns example 22:50 * Stretch div across 2 rows example 23:25 * Switching order of divs 24:47 * Overlapping divs 25:20

O.M.G. I've been doing web dev since the early '90s and CSS Grid is the single coolest development I've seen in all that time.

Learned a lot thanks!! Been using tables, td, tr I guess they can RIP now.

I just started developing for my new study last week and this channel is pure gold.You did very well with your Grid crash course for someone who's new with it. I just love how you research what matters to simplify it for others. Amazing teacher, Brad!

Some people are really good in explaining step by step instead of throwing everything at once, and it's one of the most important things in learning

For real, you have created some of the most cohesive and well explained programming and coding tutorials on RU-vid. Thanks for taking the time to make these.

man, just to let you know... you are litterally changing my life. thank you from across the planet

You did very well with your Grid crash course for someone who's new with it. I just love how you research what matters to simplify it for others. Amazing teacher, Brad!

This is by far the best CSS Grid tutorial I have watched.

This video has been my road map for my university webdesign assignment. It still holds up in 2020. I've been able to make grids and divs to style my middle content thanks to this guide. it is GOLD to me!

Thank you so much! I've been reading books and watching so many videos, and none of them explained grids as well you this video. Finally I'm actually understanding how to use them!

Not worrying about grid system anymore! Love this so much! Thank you Brad! You're great

This is a *revolution* of web design.

12 minutes in, and I feel less uncertain about grid. thanks, mate!

I signed up for a web design boot camp and I gotta say I've learned more from your videos than them. It's like they are trying to teach me how to play a song instead of teaching me how to read music. Seriously man, I appreciate you posting these.

You are by far the best youtuber for web development!! Thanks for all your videos, they are awesome!!!

Can't close the window without hitting the like button. Good explanation buddy! Keep it up!

I'm a freelance front-end web developer. I was working on a project where I need to use grids. And as a guy who have never worked with grids before, this video came to my rescue. I want to thank you.

I've been struggling with positioning for AGES!!!!! and then your stunning video pops up in a search and all my PROBLEMS GONE! Thank you sooo much for this, easy to follow, clearly explained and totally understandable 27 minutes.

Feeling quite contented for having gone through tutorial. And the usage of new HTML files for explaining every new concept is also a good idea as it keeps things simple and a hierarchy of the our learning curve becomes available to us to refer back in the future. Thanks Buddy.

You are simply the best teacher.I can't explain how you have impacted me.God bless you sir.More grace.

I was really struggling with containers, grids etc and you explained it perfectly! Thank you for your effort! It's really appreciated

have done some studies on grids before but needed to get a good review. You were great with all the basics needed to make this work. Your easy to follow, do not go to fast and explain things as you go along so we can stop to look, listen and learn. It can get complicated but grids will make design a lot easier. Each person just needs to work with for a while to learn. Thanks for doing this video.

Thank you for taking the time to put together such a clear and practical tutorial! Definitely worth watching!

26:19 Having to add margin negatives and things like that which is CRAP. I literally screamed: AMEN

I've been thinking of enrolling myself in a coding bootcamp for a months but it'll cost me an arm and leg..until I found your easy to understand tutorials! thank you and never get tired sharing us your knowledge. = ]

I just started developing for my new study two weeks ago and this channel is pure gold. Thank you so much!

Good crash course, Brad. I've been using your crashes course because I'm getting into web dev coming from a help desk background. I have a solid understanding of programming but the HTML and CSS stuff has been tricky, but your course have made it much easier.

First of all, great video! You really explained the concept it in a great, understandable way! But more on the subject of CSS grids.. Damn, this is actual magic! Alignment used to be such a pain back in the days. I started out using tables, and then progressed to random divs that would only align correctly if you did a special dance and the gods had mercy upon your soul. CSS grids is absolute genius.

You are the man!! Thank you so much for this crash course. I just realized I followed along to your Electron video one night when I was just relaxing in my living room to help solidify my basic understanding of how it worked. Keep up the good work.

Thak you, Brad. You've helped me a lot with this one. I can't express how grateful I am.

I'm new to web development and I have been trying flexbox earlier but CSS Grid seems much easier and reliable! Thanks, Brad, good work there!

best quote of the video. "If I can get this freaking thing in here"

So sick. I learned frames first, than tables, than containers, than responsive grids, than (just short time ago) flexbox and now css-grid. And after 20 years we finally got what we all have waited for!

no matter how many thank you's I say it will never describe how much your videos are actually helping me, so thank you so much

Dude, i was ready to pull out all my hair trying to do an assignment for a class im taking but this vid saved my ass. Thanks bro!

Stay safe during the Coronavirus! Nice tutorial! For my reference as I'll likely return: 05:10 Example 1 grid-template-columns: 70% 30%; 13:00 Example 2 grid-auto-rows: minmax(100px, auto); 13:56 Example 3 nesting grid 19:11 Example 4 justify-items: (horizontal -- start, center, end, stretch)/align-items: (vertical -- start, center, end, stretch) PLURAL -- applies to all 20:27 Example 5 justify-self: (horizontal -- start, center, end, stretch)/align-self: (vertical -- start, center, end, stretch) SINGULAR -- applies individually 22:02 Example 6 grid-column: 1/3; grid-row: 1/3; 25:25 Example 7 grid-column/grid-row OVERLAPPING *Revisited on 01022021* *Revisited on 04132022*

bro you save my life. ive been struggling with grid and your explanation makes it easy to understand.

One of the cleanest explanation of grids in CSS on RU-vid.

I simply love this introduction to CSS Grids! Especially the part about lines, that diagram you showed in the begining on how to think about lines in your css grids is simply essential.

Just wanted to ask for this, and here it is!

This is so cool. Almost feels like you can do anything with css now, it's like drawing stuff on the screen wherever you want it to be.

Brad, you make us understand all the difficult things in such an easy way. I would be grateful to you. I have taken almost all of your courses on Udemy. Thanks.

Another great video. Thank you!

If you have two grid items and you want them each to take half a page but still stay on top of one another you can use: grid-template-columns: 0.5fr; /* a single 0.5fr */ Just discovered it and thought someone might benefit ^_^ Thanks, Brad for the awesome tutorial!

the simplicity of this explanation and teaching skill are outstanding, thank you for sharing.

You said you are just learning to understand CSS Grid, but you explain it brilliantly. Thank you.

hello brad, I like all your videos. Thank you for sharing.

I feel so late learning this. This is so powerful.

Thanks a lot for your high-quality and wonderful tutorials. And your voice is so soothing to my soul!

Great tutorial, love the way you just create different files, and the way you structure everything... great job 👌🏾

While I was watching I justed yelled: "Oh Jesus...". That is the feelin I feel right now, Grid layout is gonna make my miserable full-stack developer's life so easier! Thank you sir for taking you time to explain in such a good way this new feature!

CSS Grid is the best thing to ever happen to front-end developers.

I don't often use this word regarding YT videos, but now I have to - the tutorial is PERFECT!!! Thank You!

Thumbs up from me. I came here because my online course was kind of difficult to understand but you showing how to do it in real time really helps.

omg this is the future

i hand coded some of the first websites in 1994, been waiting 23 years for a standard like this....

i always come back to brad's vids, they are always so clearly explained. best in the business!

After reaching "grid-column" and "grid-row", I started to feel it from my core of heart.

Brad you are my effing hero; just finished the final project in your udemy course, and loved it. Thank you. Do you think you could do on tutorial on a secure way to process payments, perhaps with angular?

I hope you do more on this CSS grid layout

Wow, just learning grid now and this was a big help for the basics. Some of the other lectures I've seen on it when too high level too quick. This helped me really grab hold of it. Thanks Brad.

thanks man i have been buzzzing my head of in making side content in a html template for the past 2 days... this has cleared my lots of concepts

18:00 Me: "You've got three times 'box4'!". 24:00 Video maker: "They all say 'box4'".

21:44 "The last concept that I wanna talk about is the one that is a lil confusing, it was lil confusing to me at first it still kinda of it is but it is using lines." Lol, in my mind I am like I am not sure if I wanna hear it hahaha

This is the most sensible explanation of CSS Grid i've seen so far. Thank you sir!

I know when you posted this you were new to grids. But man this is a great video for an introduction! You explained what you know in a phenomenal and professional way and made it very easy to understand! Thank you!

an other tip you can do is place the cursor in front of the item you want to comment and press crtl+/ , it should comment out the item. For a block, just highlight it and use the same key command

Need some latest node js and express simple app freestyle coding..love ur vids..

Thank you so much for making these videos. I have been bouncing from job to job and industry to industry for the past 6 years since I started working. Everytime I enter a job I am always the new guy and get let go because of seniority at my work and I either end up doing 3 times the amount of work for the same pay from my coworkers or I get part time and can't make enough to cover my rent and expenses. Im now working as a freelancer and making websites in no small part to your videos and others I have found on youtube and udemy so thank you so much for giving people like me who started working later in their lives an actual career instead of just a 9-5 job. Seriously man, your making the world a better place for us keep going and when I get another client that puts me farther into the black you will see me on your patrion page.

i've been watching so many videos of yours at this weekend. thank you one more time!

Excellent tutorial, I went through this on Freecodecamp, and was a little confused, you really cleared it up. Thanks As an "older" person trying to teach themselves to be a web developer, I need much more of this type or turtorial.

just bind "CTRL" + "/" to comment lines

very educational, and easy to follow. I truly enjoy your friendly tone. Learning is fun, especially when I have a good instructor like yourself. Thank you from Japan.

Consequently, the gaining of knowledge becomes an experience to be enjoyed. Merci beaucoup monsieur.

RIP Bootstrap

hi, your video is great. a bit complicated for a newbie like myself. can you make something {if it still applies} to have a basic layout of header and nav, 1 or two sidebars, main content and footer? just something basic for a newbie?

I can't count the number of times I've seen this. Helped me a lot (understatement of the year).

Used to make websites back in the day, and always used tables and frames. This is awesome. Starting a new project and this is a game changer! Thanks!

It is confusing, that the indexes of the rows and cols start at 1 and not at 0

This is going to be so fucking sexy with hover states.

This is the best CSS grid tutorial video i have watched, thank you so much Brad!!

Just that little information of the difference between flexbox and grid layouts gave me clarity. Great teacher you are. Thanks

Is it responsive?

can you make a video on how to make a chess game online

You're being clear enough for me. I think I have enough to start a training page for a new industrial control GUI tomorrow at work. Now I have some nice fill in work at my job so my boss won't bug me! LOL! Thank you so much!

Thank you very much! Understood a lot of basics I have missed on the way, which now scares me of entire frontend development thing

Dude I have been making my website for soo long and I haven't used css grid. I just realized how much BETTER MY WEBSITE COULD'VE BEEN. Time to get to work... thx :)

Fantastic Teaching and examples. I know this is 3 years old. But I am glad you had the fore sight to make this. Thank you thank you thank you.

Fantastic tutorial! Stuck to the details of grid layout and didn't add complex stuff into the mix to make it confusing. These will be a great template for using grid. Great job!

Great job on this, I'm finally at a place where I can start implementing css grid in some projects.

You know what,you actually made it look really friendly and easy to use,nice one man and thanks

One hell of an introduction to CSS Grid. Thank you!

Great tutorial, thank you! I'm playing with ReactJS and CSS grids, and haven't had that much programming fun for 20 years.

I honestly have no idea why people disliked this amazing video. Thank you so much, Brad.

Best grid explanation i have seen so far.

been looking everywhere for the overlap, thanks!

This is awesome, thank you! Loved seeing the real-time updates as you made changes!

I know this is late, but this is probably the best intro on the grid system that I have seen. Thank you so much for this video. I am working with react and using a .css file.

This was so helpful and your presenting style is so easy to learn from! Thank you!