CSS Grid Layout Crash Course
Vložit
- čas přidán 31. 07. 2017
- 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.traversymedia.com/download...
BUILD A CSS GRID WEBSITE:
• Build a Responsive Gri...
BECOME A PATRON: Show support & get perks!
/ traversymedia
ONE TIME DONATIONS:
www.paypal.me/traversymedia
FOLLOW TRAVERSY MEDIA:
/ traversymedia
/ traversymedia
/ traversymedia
EDUONIX COURSES: Please use affiliate links from website below
www.traversymedia.com/eduonix-... - Věda a technologie
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
You have helped me as well! Thank you, David!
Pin this comment my guy
Thank you sir
Thanks!!!!
You're a true legend!
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.
It is pretty damn awesome :) I can not wait to build something with it
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.
to me it looks like the tables of yore except you do it in css
never found out why were tables so hated
@ 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
Chester Draws tables were hated because they are terrible for screen readers, muddy the distinction between data and presentation, and were a hack
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
like who?
that's why this this channel is unique out of all there available on YT
For real, you have created some of the most cohesive and well explained programming and coding tutorials on CZcams. Thanks for taking the time to make these.
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!
This is a *revolution* of web design.
I totally agree man, this is quality stuff
bruh. this solves many common gripes.
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.
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!
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!
Thank you sir :)
Isaac new in the town.
26:19 Having to add margin negatives and things like that which is CRAP. I literally screamed: AMEN
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.
man, just to let you know... you are litterally changing my life. thank you from across the planet
Learned a lot thanks!! Been using tables, td, tr I guess they can RIP now.
Relatable, i used dreamweaver during my studies and that's how our lecturers instructed us to do 😂
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)
@@stepanostapuk4120 Of course: use tables for tabular data. Just never ever use them for layout purposes. There's the law.
Lol! What are you doing here @Hussein? :D
@@stevenvanhulle7242 exactly. Or for email or content that needs to generate a pdf.
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.
I was really struggling with containers, grids etc and you explained it perfectly! Thank you for your effort! It's really appreciated
best quote of the video. "If I can get this freaking thing in here"
"Margin negative, witch is crap" haha
hahaha it's so funny because we've all been there. such a relatable quote.
22:00
The accurate frustration of your average developer.
Brads the man for his relatable narrations/moments of wtf
You are by far the best youtuber for web development!! Thanks for all your videos, they are awesome!!!
Thak you, Brad.
You've helped me a lot with this one.
I can't express how grateful I am.
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.
Not worrying about grid system anymore! Love this so much! Thank you Brad! You're great
This is by far the best CSS Grid tutorial I have watched.
I just started developing for my new study two weeks ago and this channel is pure gold. Thank you so much!
Thank you for taking the time to put together such a clear and practical tutorial! Definitely worth watching!
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!
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 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.
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.
You are simply the best teacher.I can't explain how you have impacted me.God bless you sir.More grace.
12 minutes in, and I feel less uncertain about grid. thanks, mate!
bro you save my life. ive been struggling with grid and your explanation makes it easy to understand.
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.
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!
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.
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
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 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.
Can't close the window without hitting the like button. Good explanation buddy! Keep it up!
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
Great tutorial, love the way you just create different files, and the way you structure everything... great job 👌🏾
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*
lol
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!
Is there any way to do that with grid-template-areas?
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!
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!
Just wanted to ask for this, and here it is!
same :D
watch Rachel Andrew and Morten Rand-Hendriksen YT videos. They promote this technique
Where ?
Another great video. Thank you!
Just that little information of the difference between flexbox and grid layouts gave me clarity. Great teacher you are. Thanks
the simplicity of this explanation and teaching skill are outstanding, thank you for sharing.
I feel so late learning this. This is so powerful.
Me too
I just learned flex box and i was like wow! This is even better! :)
I wonder if learning grid is necessary at all given that boostrap can do these things just as well if not better
talking about starting late: me starting 10 month later than you 😂
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?
Thanks a lot for your high-quality and wonderful tutorials. And your voice is so soothing to my soul!
i always come back to brad's vids, they are always so clearly explained. best in the business!
hello brad, I like all your videos. Thank you for sharing.
Well show the man some l$ve then?
You're very welcome, thanks for watching :)
Thanks. Great video.
Traversy Media cant get the wrapper to make nth-child respond. Followed code exactly.....please help
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!
did you graduate or still in university
Thank you very much!
Understood a lot of basics I have missed on the way, which now scares me of entire frontend development thing
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.
i hand coded some of the first websites in 1994, been waiting 23 years for a standard like this....
I've been waiting 23 years for Microsoft to build a decent browser that follows standards too, still waiting....
Are you an ex Berner Lee's apprentice?.
@@robbyz512 😂
@@PaulBrownclk-me They were too busy trying to monopolize their crappy browser
@@PaulBrownclk-me 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
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
thats awesome but how do you do /* */?
@@happyrebel7777 just select all the lines you want to comment out
This is the most sensible explanation of CSS Grid i've seen so far. Thank you sir!
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!
I hope you do more on this CSS grid layout
I will be building an actual project with it very soon
Traversy Media YES!!!!
18:00
Me: "You've got three times 'box4'!".
24:00
Video maker: "They all say 'box4'".
One of the cleanest explanation of grids in CSS on CZcams.
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.
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!
Truth! I was just saying this is exactly what I need for Electron desktop application development.
You still have to think about old browsers that not support grids
omg this is the future
It's awesome
Traversy Media Is it easy making an actual website with CSS grid?
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.
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.
CSS Grid is the best thing to ever happen to front-end developers.
just bind "CTRL" + "/" to comment lines
that's right bro
Actually, that's there out-of-the-box in Atom. :)
Oh wow thanks, that really helps! What a powerful editor is Atom, damn.
Your the man Giorgi, I didnt know that and it was really bugging me doing single line comments in css!!!
Damn I never knew. Works on VSCode too
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.
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!
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
Need some latest node js and express simple app freestyle coding..love ur vids..
Indeed, would love more node stuff
indeed!
possibly with typescript :D
You said you are just learning to understand CSS Grid, but you explain it brilliantly. Thank you.
I don't often use this word regarding YT videos, but now I have to - the tutorial is PERFECT!!! Thank You!
RIP Bootstrap
But bootstrap offers a lot more than layout helpers.
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.
as someone who learned css years ago i have no idea wtf bootstrap even is to this day
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
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.
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.
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!
This is awesome, thank you! Loved seeing the real-time updates as you made changes!
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?
Hey, did you ever find a video about basic layout? I need one too... 🤔
You can find that here in this Complete Guide to CSS Grid - shorturl.at/dxyHJ
@@thecinnamonify I created this Complete Guide to CSS Grid here - shorturl.at/dxyHJ
@@DevDreamer thanks for the link!
This is going to be so fucking sexy with hover states.
I wonder if it animates nicely, and if so... is it 60fps?
Outstanding tutorial. I'd love to see a mix of text and images and how the images behave in a grid regarding scaling, and also effects of media queries on the grid structure. Thank you!
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!
Thanks! was wondering why the VS CODE emit showed a grey selection. Makes sense. Thanks again.
It is confusing, that the indexes of the rows and cols start at 1 and not at 0
Always been
Is it responsive?
FAM PRODUCTION sort of but you will still need some media queries in certain situations.
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.
Yes, I created a Complete Guide here - shorturl.at/dxyHJ
Wow. The video just keeps getting more and more mind-blowing.
I wish my school taught this... Thank you so much.
Great tutorial, thank you! I'm playing with ReactJS and CSS grids, and haven't had that much programming fun for 20 years.
can you make a video on how to make a chess game online
lol
No need to make your own just go to chess.com
If you use that logic there's no need to become a web developer just hire one. (??)
One of the best explanation I ever heard. Thank you so much for your time and dedication! Outstanding work! Keep up
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.
You know what,you actually made it look really friendly and easy to use,nice one man and thanks
You earned my sub with this video. Great explanation and great examples! I've been looking for a good explanation to this a a few days now.
This is the best CSS grid tutorial video i have watched, thank you so much Brad!!
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!
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!
An excellent video on CSS grid basics. It explains extremely well the basics and essentials of CSS grid. Thank you very much for sharing your knowledge.
Very explicit, I'm following your videos for a while and gaining confidence back developing :D
Thank you Brad
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! This tutorial helps tremendously. Well structured, explained, and demonstrated.
Consequently, the gaining of knowledge becomes an experience to be enjoyed. Merci beaucoup monsieur.
This is such an amazing explanation of grid. I am on my third tutorial now and this is the best so far.