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
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.
@ 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
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!
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 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!
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.
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*
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)
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!
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!
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!
For real, you have created some of the most cohesive and well explained programming and coding tutorials on UA-cam. Thanks for taking the time to make these.
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.
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!
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.
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 :)
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.
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 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!
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!
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.
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. = ]
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!
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!
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.
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.
@@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
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.
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
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!
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
So I'm going to community college for web development, second semester, we just started working on grid, and our teacher, I have respect for, really a genius, but unwilling to really get down and teach. Just gave us some links to grid reference pages and said good luck. This has been the most helpful tutorial on grid I've found all week. Unfortunately I'm still having issues with my assignments and I'm desperate to really learn grid inside and out, up and down, side to side so I can use the techniques not only for future work, but right now for my personal website that I'm building.
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.
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.
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!
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.
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?
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.
This is freaking amazing! From now on, I'l use grid EVERYWHERE, this is so much sophisticated and more practical than writing stupid margins or floats or wahtever...
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?
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.
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!
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.
Thanks again for this useful video. For those who are learning first time; I recommend to do "FCC > Responsive Web Design Certification > CSS Grid" and check this video + do the coding alongside. I personally felt; for new developers the pace of this video can be overwhelming.
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
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.
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 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!
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.
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
man, just to let you know... you are litterally changing my life. thank you from across the planet
This is a *revolution* of web design.
I totally agree man, this is quality stuff
bruh. this solves many common gripes.
Mr. Traversy You're Greatest of all time.
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.
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.
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?
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 are by far the best youtuber for web development!! Thanks for all your videos, they are awesome!!!
For real, you have created some of the most cohesive and well explained programming and coding tutorials on UA-cam. Thanks for taking the time to make these.
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.
I can't count the number of times I've seen this. Helped me a lot (understatement of the year).
12 minutes in, and I feel less uncertain about grid. thanks, mate!
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 by far the best CSS Grid tutorial I have watched.
One of the cleanest explanation of grids in CSS on UA-cam.
26:19 Having to add margin negatives and things like that which is CRAP. I literally screamed: AMEN
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!
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 :)
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.
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.
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
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!
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
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
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.
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. = ]
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
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.
You are simply the best teacher.I can't explain how you have impacted me.God bless you sir.More grace.
You said you are just learning to understand CSS Grid, but you explain it brilliantly. Thank you.
Can't close the window without hitting the like button. Good explanation buddy! Keep it up!
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!
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!
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.
Not worrying about grid system anymore! Love this so much! Thank you Brad! You're great
bro you save my life. ive been struggling with grid and your explanation makes it easy to understand.
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.
it feels like the world is between UR hand now bro!!
Thak you, Brad.
You've helped me a lot with this one.
I can't express how grateful I am.
You can pay at his patron page if you are much grateful
I don't often use this word regarding YT videos, but now I have to - the tutorial is PERFECT!!! Thank You!
Thank you for taking the time to put together such a clear and practical tutorial! Definitely worth watching!
Traversy, you are the GOAT developer on UA-cam. I might become a full stack dev just from binging your channel, haha.
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 ?
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.
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 😂
i always come back to brad's vids, they are always so clearly explained. best in the business!
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 😂
@@PB72UK They were too busy trying to monopolize their crappy browser
@@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
As initially mobile developer, I am finally beggining to understand web design. Thank you and thanks for the people who made css grid.
18:00
Me: "You've got three times 'box4'!".
24:00
Video maker: "They all say 'box4'".
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.
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
I honestly have no idea why people disliked this amazing video. Thank you so much, Brad.
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
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!
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
I want to hug you. This is going to making my front-end career SO much easier
omg this is the future
It's awesome
Traversy Media Is it easy making an actual website with CSS grid?
Thank you very much!
Understood a lot of basics I have missed on the way, which now scares me of entire frontend development thing
CSS Grid is the best thing to ever happen to front-end developers.
So I'm going to community college for web development, second semester, we just started working on grid, and our teacher, I have respect for, really a genius, but unwilling to really get down and teach. Just gave us some links to grid reference pages and said good luck. This has been the most helpful tutorial on grid I've found all week. Unfortunately I'm still having issues with my assignments and I'm desperate to really learn grid inside and out, up and down, side to side so I can use the techniques not only for future work, but right now for my personal website that I'm building.
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.
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!
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
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.
Another great video. Thank you!
This guy says it how it is. Most down to earth tutorial style ever. But still smart.
I hope you do more on this CSS grid layout
I will be building an actual project with it very soon
Traversy Media YES!!!!
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.
A-LAB TV what happened? Why did you stop?
@@gabeadams2926 I dont have answer to your question:)
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?
one of the best HTML tutorials I've ever watched
CSS tutorial
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.
This is freaking amazing!
From now on, I'l use grid EVERYWHERE, this is so much sophisticated and more practical than writing stupid margins or floats or wahtever...
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
Just that little information of the difference between flexbox and grid layouts gave me clarity. Great teacher you are. Thanks
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!
Great tutorial, thank you! I'm playing with ReactJS and CSS grids, and haven't had that much programming fun for 20 years.
It is confusing, that the indexes of the rows and cols start at 1 and not at 0
Always been
Sometime typing a lot of comment is not powerful. You are a star
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
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!
This is going to be so fucking sexy with hover states.
I wonder if it animates nicely, and if so... is it 60fps?
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.
I just started developing for my new study two weeks ago and this channel is pure gold. Thank you so much!
Very neatly explained. Never change your style of teaching.
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.
Thanks again for this useful video. For those who are learning first time; I recommend to do "FCC > Responsive Web Design Certification > CSS Grid" and check this video + do the coding alongside.
I personally felt; for new developers the pace of this video can be overwhelming.
I was really struggling with containers, grids etc and you explained it perfectly! Thank you for your effort! It's really appreciated
After reaching "grid-column" and "grid-row", I started to feel it from my core of heart.
One Of The Best Video On CSS I've Ever Watched, Brad You Are A Savior Brother.
You know what,you actually made it look really friendly and easy to use,nice one man and thanks
Consequently, the gaining of knowledge becomes an experience to be enjoyed. Merci beaucoup monsieur.