Learn CSS Grid in 20 Minutes

Рет қаралды 764,974

Күн бұрын

🚨 IMPORTANT:
Learn CSS Today Course: courses.webdevsimplified.com/...
In this video we will cover everything you need to know about CSS grid in only 20 minutes. We will cover what grid is, how grid differs from flexbox, how grid works, and the different properties you can use to layout and style your grid containers and items. CSS grid is one of the most powerful layout tools ever added to CSS. It allows you to create dynamic, responsive, and complex layouts with very little code. We will be covering all of the terminology, by going through live examples of all the different grid properties.
If there is anything you feel I missed in discussing grid, or anything about grid that confused you, please let me know in the comments below.
Learn Flexbox in 15 Minutes:
• Learn Flexbox in 15 Mi...
CodePen for this Video:
codepen.io/WebDevSimplified/p...
Twitter:
/ devsimplified
GitHub:
github.com/WebDevSimplified
CodePen:
codepen.io/WebDevSimplified
#CSSGrid #WebDevelopment #Programming

Пікірлер: 697

@WebDevSimplified 5 жыл бұрын

If you haven't already, make sure to checkout my Flexbox tutorial. It will make following along with this video much easier. kzfaq.info/get/bejne/nL-haLOJzLnXknk.html

@emmanuelsofuwa280 Жыл бұрын

Your tutorials are so helpful, thank you for simplifying the web no pun intended.

@dianale5218 Жыл бұрын

where are you writing the code? also how do you put this website on the web?

@bobby3208 Жыл бұрын

@@dianale5218 He's writing the code inside software called VSCode and using an extension called Live Server or running a http server with python.

@sandyjameslord 3 жыл бұрын

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

@worldclasscode1847 2 жыл бұрын

Are you sure it's good to place flexbox inside of grid? Why not flexbox in flexbox?

@dokedoke0426 2 жыл бұрын

@@worldclasscode1847 Cuz it takes up a lot more containers, css selectors and also a lote more repeated properties, IMO.

@zombiefacesupreme Жыл бұрын

@@dokedoke0426 yeah, it's pretty obvious. If you have four columns and four rows, that's one grid vs. four flexbox containers, etc.

@nikhilsinha2191 Жыл бұрын

@@zombiefacesupreme its 5 the i guess you have to put the other 4 flex box in a single flex box as well for easier layout

@Tenchi707 Жыл бұрын

if you are here, I beg you! can you explain me how as soon as he adds a new div, there's already color and text inside that div but he hasn't written any text in the main html file, how is this happening? and why is he using two css files? I understand the styles.css but what's the other background_styles.css doing? I don't understand, please explain!

@GregDowns 2 жыл бұрын

Beginners will be in confusion at 2:45 with you glossing over how the starting boxes were styled. I watched this video when I was starting out and I didn't know you'd created a separate css sheet for the visual styling. I thought I could follow along as-is and could never work out why I didn't have any blue boxes. In my naivete I thought that's what grid was supposed to do and was worried that mine wasn't! Now I come back with some knowledge I see that this ISN'T a beginner video. Great instruction otherwise. We need plenty more post-beginner/intermediate stuff.

@caroltheman98 2 жыл бұрын

This confused me too, but I saw that he had linked the background.css stylesheet to the document after reading your comment. Thought I'd leave a reply so people will know what's up if they get stuck

@dannyr2976 2 жыл бұрын

I thought the exact same thing. I saw a linked 'style.css' file but no parameters were included so still confused as where that styling came from.

@solarsequitor7374 2 жыл бұрын

Let's see your videos then DORK.

@FreezeMageZ 2 жыл бұрын

Hi, may I know what is the css content in background.css that generate the box with the numbers generated accordingly when new divs were made?

@babinio7458 2 жыл бұрын

@@caroltheman98 where is this particulat stylesheet?

@ChantingInTheDark Жыл бұрын

For those wanting to know how the DIVs are auto-numbered, it's these styles which are in the background_styles.css file (which isn't shown in the video but is available in the CodePen example) .grid-item::before { content: 'Grid Item'; position: absolute; font-size: 18px; font-weight: bold; top: 10px; left: 15px; } .grid-item::after { position: absolute; font-size: 18px; top: 10px; right: 15px; font-weight: bold; } .grid-item-1::after { content: '1'; } .grid-item-2::after { content: '2'; } Etc.

@eobardthawne6903 10 ай бұрын

Thanks, was wondering the same.

@peterwoo2718 6 ай бұрын

this reply should be pinned

@achengster4 4 жыл бұрын

I always look for Kyle when I want to learn about coding

@briandacallos4234 4 жыл бұрын

me too

@paulbrown6792 3 жыл бұрын

@@briandacallos4234 let me know if you find him ;) lol

@briandacallos4234 3 жыл бұрын

@@paulbrown6792 Just search "Web Dev Simplified" and you're good to go :) Sarcasm attack ? Good luck old man

@user-og9nl5mt1b 2 жыл бұрын

@@briandacallos4234 let the man have some fun , jackass

@rizla8602 2 жыл бұрын

@@paulbrown6792 hah, good one :)

@zombiefacesupreme Жыл бұрын

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

@sonotsoma 3 жыл бұрын

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

@rnater7145 2 жыл бұрын

It's lean and healthy webdev "food" - no fillers, no crap. KZfaq needs a tip me $5 button!

@Tenchi707 Жыл бұрын

@Islandstone89 Жыл бұрын

@@Tenchi707I assume the background color and the numbers are coming from the background_styles.css

@nigelnovak3096 4 жыл бұрын

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

@Tenchi707 Жыл бұрын

@iraklis178 Жыл бұрын

@@Tenchi707 In the other file he has put the background color .New divs get the color by heritage , as some properties get passed down .

@amazing-ek2uo Жыл бұрын

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

@tickletickle8561 Жыл бұрын

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

@parthdeshwal4419 Ай бұрын

this guy made this video and was able to explain the topics better than most youtubers.... thanks bud

@Coda_n 2 жыл бұрын

The 77 dislikes are from those professors who caused us to come here.

@abufattahhossain510 2 жыл бұрын

@sandeshadhikari4785 2 жыл бұрын

Where are you from?

@Akumakie 2 жыл бұрын

😂😂😂

@dekenparker-lynch1630 2 жыл бұрын

😆😆😆

@Ahmad-qg4yj Жыл бұрын

🤣🤣💯💯

@AitorMorgado 4 жыл бұрын

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

@LeSaboteur3981 3 жыл бұрын

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

@ladannazary5546 2 жыл бұрын

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

@alexisgono1729 7 ай бұрын

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

@farn451 3 жыл бұрын

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

@protical261 3 жыл бұрын

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

@AndrewTSq 3 жыл бұрын

same here. so many examples that did not work, or overcomplicated it by showing "how to do grids by writing a raytracing animation at the same time" instead of just showin the basics. This tutorial was the best and most informative.

@Coronerlex 2 жыл бұрын

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

@zeppelin0110 2 жыл бұрын

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

@semaytube370 Жыл бұрын

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

@ruthwik8772 3 жыл бұрын

for background_styles.css file, you could use something like this body { color: gray; } .header { text-align: center; } .grid-container { display: grid; } .grid-item { min-height: 100px; border-width: 10px; border-style: solid; border-color: black; background-color: skyblue; }

@tommieirl1 Жыл бұрын

I love you

@313PH4N7 Жыл бұрын

Instead of typing all of these: border-width: 10px; border-style: solid; border-color: black; You could write: border: 10px solid #000; All the best.

@Tenchi707 Жыл бұрын

if you are here, I beg you! can you explain me how as soon as he adds a new div, there's already color and text inside that div and the text even says different numbers for different items but he hasn't written any text in the main html file, how is this happening? and why is he using two css files? I understand the styles.css but what's the other background_styles.css doing? I don't understand, please explain!

@Novodip Жыл бұрын

@@Tenchi707 The background styles css is for all the colors in the div

@barnabassolomon1629 Жыл бұрын

bless your sould and heart

@petarkolev6928 2 жыл бұрын

Incredibly simple explanations with nice examples! Great tutorial!

@FredericGuimont 3 жыл бұрын

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

@jovannovakovic5975 5 жыл бұрын

And that's exactly what we want! 😊 Awesome and simplified as always. Great job, Kyle!

@WebDevSimplified 5 жыл бұрын

Thank you! I am really glad you enjoyed the video.

@Tenchi707 Жыл бұрын

@danlearnstoplay2737 7 ай бұрын

@@Tenchi707 Hei man, i just started to learn html/css like a month ago but I think I can help with this one, basically, as you mentioned, he is using 2 css files. one is the one we see in the video to explain the grid , and the second one that is not showing, includes the css code to style the divs ( color background etc ). I'm guessing the reason for doing this is simply that the css file used for the tutorial is fresh without any clutter from the color / background colors attributes.

@xugestory 5 жыл бұрын

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

@user-fs2zt4tk6q 2 жыл бұрын

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

@iamtharunraj 11 ай бұрын

Thanks A lot Kyle. I was always stuck at grid-template-area, but this video helped me to learn it too. You really simplified everything. Good job!

@jaydeepdas1408 4 жыл бұрын

Amazing explanation! Hats off to you Kyle, you have made my life easier. 😊

@anthonylatorre6592 Жыл бұрын

I've been struggling to understand css grid recently but this video really helped simplify it. Thank you for your help!

@ruthpol Жыл бұрын

Fast and precise with visual examples. The exact way a video on css styling can excel. Thanks!

@rustndust818 3 жыл бұрын

Absolutely fantastic!! Using Grid with Flexbox is just amazing!

@agungaurelius1680 8 ай бұрын

This man is truly genius. He explains with his simplified terms. Good job!

@juliemassa6024 3 жыл бұрын

That was the best explanation on this that I've seen and I understand it much better now! Thank you!

@verakorchemnaya3971 2 жыл бұрын

Very good video! Thank you for talking about justify-content / align-content and justify-items / align-items. Made things very clear in my mind!

@olaeniola3810 3 жыл бұрын

This gentleman is really good and makes complex topics so easy. I wanna be as good as you someday. I know it will take a lot of practice, practice, and practice but am ready for it this time around and I won't stop until I become an expert web developer. Thank you for inspiring people like me who have almost given up. Thanks, once again!.

@slava_in3757 3 жыл бұрын

Great tutorial. Very concise and informative, made great help for me. Thank you, Web Dev Simplified!

@CC-bm3wb 2 жыл бұрын

Good tutorial, really helped me watching you do the examples in real time than just reading it!

@codenamegrant 4 жыл бұрын

Great video, thanks for explaining the difference between flexbox and CSS grid. It's really helpful.

@fredriksundgren2326 3 жыл бұрын

Thank you so much , I have banged my head for a few days not undrstanding grid. This video is really good.

@tagalismacherrifer7603 4 жыл бұрын

Oh thank you so much, this helps a lot... your videos becomes my reviewer and yes definitely "simplified"... You guys are awesome!

@michaelsvoboda1024 4 жыл бұрын

This is PRECISELY what I was looking for, thanks a lot.

@reflectionethio9662 2 жыл бұрын

This is the most short but brief explanation, thank you kyle

@Cheesedipper32 2 жыл бұрын

Thank you so much for this one, best explanation of css grid I've heard!

@SpiritualFacts 4 жыл бұрын

really awesome and in depth, better then other tutorials in KZfaq

@dragonniteIV 8 ай бұрын

This man right here explains stuff like it's very easy. I always wonder why i found things difficult after hearing your explanation! Well done sir!

@dianatodorova9799 Жыл бұрын

Super useful tutorial. I subscribed immediately. The lectures are simply explained and easy to listen and understand. Happy to find this channel. :)

@laffinkippah 3 жыл бұрын

Great content. Concise and comprehensive. Thank you!

@calmingcoffeerain6217 4 ай бұрын

You are amazing man! best Ive seen. Thanks so much!

@Greg4510able 2 ай бұрын

Kyle, you continue to be the man. Keep up the great work. Thanks for the knowledge, God bless you.

@JoaoPaulo-ox6pr 2 жыл бұрын

This channel is simply amazing!

@diphlexusmngadi2926 4 жыл бұрын

Another great video. You need to do more on marketing...more people are looking for just your kind of videos and just haven't found you yet. Awesome stuff.

@dorin7022 2 жыл бұрын

I love you man. Your ability to teach is incredible.

@michaelmaldo7345 Жыл бұрын

really easy to follow -- good flow order of concepts!! thumbs up man!!

@Markus-iq4sm Жыл бұрын

One of the best tutorials on the CSS Grids

@SHiniGAMi_007 10 ай бұрын

One of the best channels out there Thank you for this video

@mohamedelgazar5283 Жыл бұрын

thank you very much for such demenstrative break down it's amazing what you can explain in 20 mins.

@XjafnerX 4 жыл бұрын

best video i ve seen about grid, thank you so much

@adekunlefhunkie2170 9 ай бұрын

not boring and very impactful. my fave webdev youtuber🥰

@nehakumar9889 4 жыл бұрын

Amazingly explained 🌼 Now building my final year project with your help 🌹

@cosme2441 3 жыл бұрын

Thanks for the helpful content. Clear and concise!

@abikuneebus Жыл бұрын

you're a hero, dude. completed freeCodeCamp's Responsive Web Design course, but somehow flex and grid didn't click until I watched your 15 and 20 minute courses.

@hsiang-yehhwang2625 Жыл бұрын

This tutorial is amazing!! clear!! Thanks!!

@quentalthermilus7199 4 жыл бұрын

Your videos are great. Very easy to understand and follow.

@akalrove4834 3 жыл бұрын

I was all confused about grid-column till i saw this video. Great stuff!

@johmcg64 3 жыл бұрын

You are an excellent teacher. I need to get better at it so I can follow along at you speed.

@eborne66 3 жыл бұрын

Thanks for your concise and comprehensive tutorials.

@XL-Freak Жыл бұрын

Hi Kyle, being new to css, with only minimal html knowledge, I am somewhat overwhelmed by all this new technology. One thing I've been researching recently is a way to create tables without using html TABLE tags. I figured the answer had to be flex or grid, but this is the first of several, let me stress SEVERAL, video's I've watched that actually answered this question for me, as well as differentiating between the two! Now it looks so amazingly simple! Thank you so much!!!

@jeyzzz696 4 жыл бұрын

its my first time watching this and im not getting the idea right away on the advanced concepts (grid-column). ill try to watch a few more times. wish me luck.

@neevbadu3611 Жыл бұрын

Thanks alot you made grid so much clear...

@singhravjot Жыл бұрын

Great Explanation! Thanks

@timobrien4190 3 жыл бұрын

Wow this really made sense and helped. Can’t wait to apply!

@karentrevino6904 3 жыл бұрын

Impeccable teaching! Thanks for sharing your gift :)

@gulu8031 2 жыл бұрын

🤩 your explanation is the best, thank you

@user-kn4oi9oh4i 5 ай бұрын

this guy is the true OG! Thanks alot for this content bro

@osamashehab463 Жыл бұрын

I haven't watched the video yet but I would like to thank you for your amazing videos including the Calculator and the clock

@minphonemyat2351 3 жыл бұрын

your voice is so clear and your explanations are effective. thank you very much

@leandrolobo 3 жыл бұрын

Thanks! great tutorial, direct to the point.

@alxcandraw Жыл бұрын

Really helpful man. Thank you!

@musicartschannel1096 Жыл бұрын

great video as always, good summary

@jwilliams8210 2 жыл бұрын

Kyle, you explain things well. Thanks!

@tyt9602 3 жыл бұрын

Admire you.Good guy ever.Thankful for every videos I had ever watched!

@Zen-lz1hc 2 жыл бұрын

Like :) Great! Much appreciated for putting this together in just 20min. You concentrated really well a lot of what CSS GRID is in a very short video. Really cool

@RichardPetron Жыл бұрын

This is as good as a tutorial gets, very impressive thank for this

@andresrosales3466 3 жыл бұрын

Best tutorial i've found for grid so far :)

@javascript_developer 3 жыл бұрын

Awesome grid-area and grid-template-area. thanks for the lovely video

@olga6802 Жыл бұрын

Excellent explanation, thanks.

@mattwood2002 2 жыл бұрын

I love the pace of this dude

@sharriceowens913 3 жыл бұрын

u have a fucking gift for teaching please never stop...cause i never wanna stop learning

@taziokeijser9300 3 жыл бұрын

Your tutorial are neat and direct, thats great! can you include in those css deepening some words about media query settings?

@dekenparker-lynch1630 2 жыл бұрын

Maaaaan this was right on point! Appreciate it !

@m00mai 2 жыл бұрын

you save me so much time!! good stuff !!

@arnav_0397 3 жыл бұрын

You're amazing, you always clear my doubt

@penguinxed Жыл бұрын

Thank you so much sir for this great and well-explained tutorial! looking forward for more contents

@hetroxity Жыл бұрын

Thank you bro for your time. I really pleased

@marinamohsen6940 Жыл бұрын

This is so informative and it saved me alot of time to do my task

@Sameera. 2 жыл бұрын

Love your content man Thank you very much

@ddabral Жыл бұрын

Thanks a lot, sir, I was confused for almost a week but now I am very confident really thanks a lot.🙏

@_.sunnyraj._ 3 жыл бұрын

You and Ed are the best explainers of these things

@vickeywu8970 Жыл бұрын

very clear explanation!