CSS Grid Layout Crash Course

2022 Updated Crash Course - • CSS Grid Crash Course
In this video we will look at the new CSS Grid layout and how to create grid based layouts and alignments. We will look at properties for containers and items.
CODE: Code for this tutorial
www.traversymed...
BUILD A CSS GRID WEBSITE:
• Build a Responsive Gri...
BECOME A PATRON: Show support & get perks!
/ traversymedia
ONE TIME DONATIONS:
www.paypal.me/t...
FOLLOW TRAVERSY MEDIA:
/ traversymedia
/ traversymedia
/ traversymedia
EDUONIX COURSES: Please use affiliate links from website below
www.traversymed...

[@davidconnelly]

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

[@swallowedinthesea11]

You have helped me as well! Thank you, David!

[@Fatfit2]

Pin this comment my guy

[@DeViLTh0rn]

Thank you sir

[@cpu1001]

Thanks!!!!

[@saidalkharusi7824]

You're a true legend!

[@tienthangdinh7733]

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

[@alaareda91]

like who?

[@ketkipatil794]

that's why this this channel is unique out of all there available on YT

[@henrypostulart]

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.

[@TraversyMedia]

It is pretty damn awesome :) I can not wait to build something with it

[@avisian8063]

When I first saw him make the two column layout it was similar to the first time I saw a magician saw a woman in half. Genuinely felt like magic was real.

[@EmilNicolaiePerhinschi]

to me it looks like the tables of yore except you do it in css never found out why were tables so hated

[@bazwillrun]

@ Emil...I think they were hated because it made the layout so easy that anybody could do it and the "pros" didnt like that so decided they needed to make their job look far more difficult than it really was, and to justify their existence

[@avisian8063]

Chester Draws tables were hated because they are terrible for screen readers, muddy the distinction between data and presentation, and were a hack

[@hnasr]

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

[@neeha9449]

Relatable, i used dreamweaver during my studies and that's how our lecturers instructed us to do 😂

[@stepanostapuk4120]

I think we need tables in some cases. First of all, tables are more semantic correct for some features. Also, you can have issues when you going to print some pages ( List of invoices for example)

[@stevenvanhulle7242]

@@stepanostapuk4120 Of course: use tables for tabular data. Just never ever use them for layout purposes. There's the law.

[@sntshkmr60]

Lol! What are you doing here @Hussein? :D

[@didacvals6419]

@@stevenvanhulle7242 exactly. Or for email or content that needs to generate a pdf.

[@IsaacAsante17]

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!

[@TraversyMedia]

Thank you sir :)

[@rudrapratapsinha8880]

Isaac new in the town.

[@ACHVPEAK]

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

[@jackpeterson1909]

This is a *revolution* of web design.

[@RevoSW]

I totally agree man, this is quality stuff

[@TheKondinho]

bruh. this solves many common gripes.

[@imagineabout4153]

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

[@sgib872]

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

[@swallowedinthesea11]

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*

[@YourMomsSideDude]

lol

[@zahrasattar8632]

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!

[@emyrdaniela6037]

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!

[@vidhi1028]

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

[@noonereallyknows6643]

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

[@lawrencekeeney4317]

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

[@zackiechan7895]

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.

[@saidalkharusi7824]

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!

[@outis99]

Is there any way to do that with grid-template-areas?

[@PoetikSage]

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.

[@JoseRodrigues-ko7vq]

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

[@FarhanAli-zb4iv]

You can pay at his patron page if you are much grateful

[@justinchen1472]

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

[@OilersLBA]

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.

[@sanjanaattanayake4231]

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

[@JesplatBeats]

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

[@jeremybrews2521]

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

[@DekaruX]

"Margin negative, witch is crap" haha

[@TheKondinho]

hahaha it's so funny because we've all been there. such a relatable quote.

[@adityakolte2599]

22:00

[@matthewstaton6810]

The accurate frustration of your average developer.

[@greenie62]

Brads the man for his relatable narrations/moments of wtf

[@grzegorzmolin]

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

[@claytonsiby5430]

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!

[@rb8365]

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!

[@baldsportsfan9368]

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.

[@justincordero7797]

Update October 2020: grid-gap: === gap: grid-row-gap === row-gap: grid-column-gap === column-gap The older syntax is deprecated but still works. Just wanted to pass this along to anyone watching this in 2020 like me. Thanks for the awesome crash course Brad!

[@karthikkumar5341]

Thanks! was wondering why the VS CODE emit showed a grey selection. Makes sense. Thanks again.

[@autumnchills2317]

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

[@horrible.hashir]

Me too

[@infinityApologeticsClips]

I just learned flex box and i was like wow! This is even better! :)

[@VinyZikss]

I wonder if learning grid is necessary at all given that boostrap can do these things just as well if not better

[@JennyZibreva]

talking about starting late: me starting 10 month later than you 😂

[@terrap0b_ps995]

One of the cleanest explanation of grids in CSS on KZbin.

[@maithinh3212]

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

[@the_neutral_container]

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

[@mccama19]

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!

[@nicholasjames8623]

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.

[@riteshmahajan5209]

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.

[@aayushmitra121]

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 :)

[@rutpshah]

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

[@iba001]

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

[@nuqwestr]

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

[@PB72UK]

I've been waiting 23 years for Microsoft to build a decent browser that follows standards too, still waiting....

[@jamesrosemary2932]

Are you an ex Berner Lee's apprentice?.

[@ripper_op5442]

@@robbyz512 😂

[@jaredbardell7431]

@@PB72UK They were too busy trying to monopolize their crappy browser

[@ChrisPollard]

@@PB72UK Try the Edge Beta, built on Chromium. I've been using it since the first Dev builds ... and when they finally make this the Windows default, and people figure out that it's actually really GOOD, Chrome may take a slight hit - and devs everywhere can rejoice about a default Windows browser that doesn't break the internet!! They're doing a good job with this one. Even Chrome extensions seem to work just fine. I've had the odd glitchy one, like ColorZilla, but they're mostly no different than on Chrome. I found resource usage to be slightly lighter too. Most I've punished it with so far was 59 tabs ... no issues, just over 3.1GB of RAM. lol

[@SiBorg8A]

This guy says it how it is. Most down to earth tutorial style ever. But still smart.

[@krowwweee2918]

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

[@vixeven]

same :D

[@dimarzio9374]

watch Rachel Andrew and Morten Rand-Hendriksen YT videos. They promote this technique

[@gamestv4875]

Where ?

[@kevniwoodside5015]

I want to hug you. This is going to making my front-end career SO much easier

[@RCManiacs]

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!

[@riverlance9647]

did you graduate or still in university

[@samialvi4226]

Mr. Traversy You're Greatest of all time.

[@darwingarcia9887]

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

[@stanley325]

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.

[@caiosaldanha7842]

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!

[@christopherderrell8470]

Truth! I was just saying this is exactly what I need for Electron desktop application development.

[@alexanderbeggins3098]

You still have to think about old browsers that not support grids

[@weltmeister]

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

[@tibielias]

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.

[@johnrusso2278]

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.

[@BANNMICHDOCHM]

omg this is the future

[@TraversyMedia]

It's awesome

[@cesarlara3974]

Traversy Media Is it easy making an actual website with CSS grid?

[@adhishmalviya2408]

in May 2020 it is still the best tutorial on CSS Grids

[@muasx1985]

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

[@Johan-rm6ec]

Well show the man some l$ve then?

[@TraversyMedia]

You're very welcome, thanks for watching :)

[@sreid70]

Thanks. Great video.

[@robertmotion]

Traversy Media cant get the wrapper to make nth-child respond. Followed code exactly.....please help

[@RenaudDenis]

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

[@jeremybrews2521]

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

[@happyrebel7777]

thats awesome but how do you do /* */?

[@matsn0w]

@@happyrebel7777 just select all the lines you want to comment out

[@sports360bd8]

I see these videos and the dislike count. I mean who gives these videos dislike and why? I just want to thank the content creator of this channel for taking the time out and making this video!

[@stevenvanhulle7242]

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

[@tarupathak]

CSS Grid is the coolest after this video, thanks a ton, man.

[@bakalomio2033]

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

[@posting_meme_i_like_channel]

that's right bro

[@GioGziro95]

Actually, that's there out-of-the-box in Atom. :)

[@Melvin420x12]

Oh wow thanks, that really helps! What a powerful editor is Atom, damn.

[@lardosian]

Your the man Giorgi, I didnt know that and it was really bugging me doing single line comments in css!!!

[@aigbilueseeronmonsele4255]

Damn I never knew. Works on VSCode too

[@AhmedBalfaqih]

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

[@edgarrussell]

Another great video. Thank you!

[@a-labtv1176]

I used to do html in early 2000s. After 16 years I need to make a webpage for my small bizz and its so much easyer now days. Thank you very much.

[@gabeadams2926]

A-LAB TV what happened? Why did you stop?

[@a-labtv1176]

@@gabeadams2926 I dont have answer to your question:)

[@tshiamowisdom1941]

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

[@thatnico8697]

Im just getting started with web design and tried coding something like this from scratch for about a week and just can't figure it out. Margins didn't fit. Width and height messed around with overflow etc. Now I see that and it's truly amazing!

[@mri912]

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

[@mehultyagi8315]

Best grid explanation i have seen so far.

[@awatson0987]

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?

[@DallasVocals]

I love that you leave us the code for I will undoubtedly always have a screw up to go back and correct after the tutes are over and then I'll go over the codes until I find what is off and well you knOw that makes me feel a whole lOt better. ;)

[@Dexter101x]

I hope you do more on this CSS grid layout

[@TraversyMedia]

I will be building an actual project with it very soon

[@cesarlara3974]

Traversy Media YES!!!!

[@teminoah2960]

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

[@umarmughal]

RIP Bootstrap

[@swiffty1]

But bootstrap offers a lot more than layout helpers.

[@onecarwood]

Check out Foundation. Much better than BS. I was thinking the same thing when I saw this. If you look at Foundation though it uses CSSGrid plus you get SASS and Handlebars plus all the transitions and Front Matter. Long time before it will be obsolete. Not to mention the default styles that both BS and Foundation have. CSS Grid will be awesome for SPA's I bet.

[@theamethyst93]

as someone who learned css years ago i have no idea wtf bootstrap even is to this day

[@TheElkster]

LOL - same here - someone suggested I use it and my ISP provided it as an install - so did and it totally took over my website - moved it to a new location and started playing with it... couldn't make heads nor tales of it and it was a little like trying to tie your shoe laces with your hands tied behind your back.... I'm sure if I stuck at it I would learn more... but I prefer to get stuck into coding and having full control

[@kylebroussard5952]

honestly bootstrap is good fro prototyping, but the library is so damn huge that if you werent an early adopter, it can be overwhelming to learn. And if you have been in CSS for years, you likely have your own go to classes in a master sheet that you basically have your own library anyways.

[@flower9067]

Really great effort. This clears all my doubts about grid

[@prakad97]

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

[@The-Average-Gamer]

Indeed, would love more node stuff

[@hachij_]

indeed!

[@nemanjasubotin9101]

possibly with typescript :D

[@andrewr900]

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

[@homerisian]

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.

[@_AmanAalam]

Dang this is so liberating! Thanks so much! CSS was such an unpredictable little annoyance for me, largely when it comes to positioning things. This is so helpful, specially when I am coming from mobile app world where UI design is very straightforward

[@geraldfoushee]

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?

[@thecinnamonify]

Hey, did you ever find a video about basic layout? I need one too... 🤔

[@DevDreamer]

You can find that here in this Complete Guide to CSS Grid - shorturl.at/dxyHJ

[@DevDreamer]

@@thecinnamonify I created this Complete Guide to CSS Grid here - shorturl.at/dxyHJ

[@thecinnamonify]

@@DevDreamer thanks for the link!

[@franpalokaj]

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

[@leetmelvic696]

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

[@Gelo09]

Always been

[@Zaque-TV]

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.

[@CriscoJack]

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

[@Quenjii]

I wonder if it animates nicely, and if so... is it 60fps?

[@sammbende2]

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

[@cesarlara3974]

Is it responsive?

[@onecarwood]

FAM PRODUCTION sort of but you will still need some media queries in certain situations.

[@StefanoPapaleo-TS]

It is. You create your media queries. For instance you can switch position of elements according to the viewport. There is a nice video by the guy behind this during a presentation at a WordPress conference I think.

[@DevDreamer]

Yes, I created a Complete Guide here - shorturl.at/dxyHJ

[@sairayoung2364]

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. = ]

[@robertmasters01]

been looking everywhere for the overlap, thanks!

[@chingashimuyenga4438]

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

[@brett84c]

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.

[@the4biddenclub]

Thank you Brad you helped me a lot, I have been stuck on css grid for 2 weeks man

[@3042640426]

Best css grid explain I ever found.

[@kenthomas1109]

Most clear presentation I’ve seen on this topic. I keep going back to tables out of frustration, but finally feel able to convert. Thanks!

[@kenthomas1109]

Turns out IE 11 (which my organization has as a standard) has a completely different way of dealing with the grid css code... I don't know why they would be out on their own on this one, but the tutorials I've seen on making grid code work in IE 11, as well, is nutz-o-kookoopants. Great video for every other browser, so still thanks!

[@jasonrivera3779]

Traversy, you are the GOAT developer on KZbin. I might become a full stack dev just from binging your channel, haha.

[@berringervids]

Been away from the "scene" for more than 10 years and was fluent with floats etc. But now, obviously; I am way behind, seeing this is 6 years ago. I grasped Flexbox pretty fast but am struggling with grids a bit. Thank you for this video! Great stuff!

[@donaldbradbury1100]

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.

[@golrokhrezvani1385]

one of the best HTML tutorials I've ever watched

[@paristar3079]

CSS tutorial

[@Suamere]

I'm in the same boat as Henry Postulart, but another thing that blows me away is when he added a border at @26:00 If you are working with margins and padding and doing this manually, you better be re-calculating EVERYTHING if you want to add a border. This is awesome.

[@Jason-bg7jc]

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.

[@noname89636]

This is what I call a shadow step by step. Thank you!

[@sirdoofalot]

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!

[@silentguy368]

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