Learn CSS Grid - A 13 Minute Deep Dive

Поділитися
Вставка
  • Опубліковано 10 січ 2025

КОМЕНТАРІ • 972

  • @slayingthedragon
    @slayingthedragon  Рік тому +28

    🚨🚨🚨 New CSS Course - slayingthedragon.io 🚨🚨🚨

    • @theexile4694
      @theexile4694 Рік тому +1

      Answered all my questions. Thank you so much.

    • @codingman8056
      @codingman8056 10 місяців тому +1

      You defainately deserver like and comment on this video

    • @musuuzanicholas4506
      @musuuzanicholas4506 8 місяців тому +1

      Thanks !

  • @oldo7
    @oldo7 10 місяців тому +126

    genuinely one of the best, most straight forward, no-bullshit and clear videos ive ever seen. I wish most videos were like this when i look for something. Thank you brother

    • @Skinsoot
      @Skinsoot Місяць тому

      Whatever bro, I came here for clickbait thumbnails, jump cuts, voice effects, and ad reads, and I didn't get any of that. I wish I had 4 hands...

  • @akmzahidulislam2764
    @akmzahidulislam2764 2 роки тому +508

    You have set high standards in producing no- nonsense technical videos. I know I will have to comeback and re-watch these to refresh my memory from time to time. I call such videos as visual-code-library. Very well done, bro!

    • @slayingthedragon
      @slayingthedragon  2 роки тому +37

      I appreciate your words, thank you very much 🙏

    • @Sleepysebbasbedtime
      @Sleepysebbasbedtime Рік тому +5

      That's really useful when we need fast technic reference!! Thank you so much bro!!

    • @user-zj6iz1rl8d
      @user-zj6iz1rl8d 9 місяців тому +1

      bro teaching grid in 10 min with more knowledge than i have learned in a week he is awesome and informative hidden gem

    • @Fennetic
      @Fennetic 3 місяці тому +1

      @@user-zj6iz1rl8d Dude taught me more about useful css compared to a whole term specifically for css... My prof didn't even bother talking about grids.

    • @subarunatsuki1902
      @subarunatsuki1902 Місяць тому

      500th like 🥳

  • @lucas.contreras89
    @lucas.contreras89 10 місяців тому +44

    This is a Spanish proverb: "I was searching for copper and I found gold", which means that I found something MUCH better than I expected! thank you!

    • @meliyomollameles
      @meliyomollameles 6 місяців тому

      How do you say it in Spanish?

    • @lucas.contreras89
      @lucas.contreras89 6 місяців тому

      @@meliyomollameles vine buscando cobre, y encontré oro

    • @Abbas-fl3bw
      @Abbas-fl3bw 4 місяці тому +3

      @@meliyomollameles just say it with a spanish accent

    • @alanayss
      @alanayss 3 місяці тому +4

      @@meliyomollameles "Vine buscando cobre y terminé encontrando oro".

  • @kamfuku
    @kamfuku Рік тому +29

    Easily one of the hardest concepts in css and you explained it comprehensively in 13mins while others have written books, articles and produced some 5hr+vids on have failed at. Literally leaving you more confused after the fact. You're amazing man, really out here slaying dragons.

    • @slayingthedragon
      @slayingthedragon  Рік тому +1

      Thank you so much ❤❤

    • @kamfuku
      @kamfuku Рік тому +1

      @@slayingthedragon No worries man I should be thanking you💯🙏🏻🙌🔥

  • @sssrikanthhh
    @sssrikanthhh 3 місяці тому +11

    Title should be: The only CSS grid tutorial you need., How can a 13.35 min video provides this much of knowledge 🤯🤯🤯

  • @salahhatem4601
    @salahhatem4601 2 роки тому +48

    I watched and read more than 50 hours of css and never fully understood everything like when i watch your videos!
    Great work and the effort you put there will definitely pay off

  • @edwardgr1698
    @edwardgr1698 Рік тому +55

    I rarely comment, but I felt that I just have to give you credit. Pacing- perfect, visual cues - perfect, amount of details and structure - perfect. You, my friend, got yourself a new subscriber. I'll be coming back to watch new and rewatch your videos. You have a great talent for teaching.

    • @slayingthedragon
      @slayingthedragon  Рік тому +1

      Thank you so much ❤

    • @porobertdev
      @porobertdev Рік тому

      +1 🙂
      I learned about grid using text and doing practice, but this video still helped.
      Loved the tip about responsive design.
      Thank you!

  • @muhammadabdullahi3312
    @muhammadabdullahi3312 Рік тому +3

    You are born to teach, Best explanation in 13 min. I don't need to watch another video. Can you please create a playlist of css videos.

  • @michellecameron1983
    @michellecameron1983 Рік тому +5

    I've just started my coding journey and your content is the best I've come across by a long shot. I am now a subscriber, thank you!

  • @mohammedafzal4343
    @mohammedafzal4343 Рік тому +35

    Bro is casually dropping powerpacked CSS content.

  • @rysiu133
    @rysiu133 Рік тому +5

    this is genuinely the best grid tutorial i've seen. simple, straight to the point and an actual deep dive. great work bud.

  • @sagarkrishna14
    @sagarkrishna14 Рік тому +10

    you saved me hours of effort. This video is super concise and detailed, that's a huge achievement. Now when I read the CSS grid's specs, it's much more easier to understand - thanks to your fantastic video.

  • @shahnoormughal6553
    @shahnoormughal6553 Рік тому +3

    There're thousands of videos about CSS grid but I get nothing and didn't understand the Grid. BUT you're the one who really taught me with your single and amaizing video. THANKS! trust me you're real teacher because you know how to deliver . THNKS again bro. LOL!

  • @newyonface3700
    @newyonface3700 9 місяців тому +1

    I understood many things in this being a designer, You are amazing explainer bro.

  • @samopaul
    @samopaul Рік тому +6

    I've seen many videos on grid, but frankly yours is so clear, a real joy to understand.

  • @anthonyyoung7949
    @anthonyyoung7949 8 місяців тому +10

    hours of research later and i finally found you. saved my life here.

  • @simpleedge
    @simpleedge Рік тому +24

    Woah. This is the most succinct, well thought out, and well delivered overview into CSS Grid. Well done! 👏👏👏

  • @vampbat
    @vampbat Рік тому +1

    9:55 "End" solves SO MANY USE CASES FOR ME that I have been trying to hard program with Flex, before learning about Grid. Thank you so much Slaying the Dragon!!!

  • @cokdillihayat-multilinguallife
    @cokdillihayat-multilinguallife 9 місяців тому +3

    Thank you so much, you make these confusing subjects very easily understandable. Please continue to share your lessons. We are appreciating so much.

  • @Lindauson
    @Lindauson Рік тому +1

    Thanks!

  • @Olderaccount17
    @Olderaccount17 Рік тому +28

    I've always taken pride in being very good at teaching/explaining things to people so that they will understand them as comprehensively and as quickly as possible. By the same token, I've always found it extremely frustrating whenever I saw people do a bad job at explaining things, even when they clearly understand the subject they're talking about. It's very obvious that knowing something does not equate to knowing how to explain it.
    Your videos, to me, are one of those moments in which I can say "Finally! Someone who *gets* it." Your way of explaining coding is perfect: you explain very clearly the basics -instead of assuming your audience already knows them-, go step-by-step, show the different possibilities with their immediate results, and use clear graphic information which is a *massive* aid when learning things.
    I'm currently taking the freeCodeCamp course, which I would say is quite good, but even they make the mistake, somewhat frequently, of having you use functions or elements or whatever without having even explained to you what they do or why you're using them. Whenever I complete a new unit in that course, I will usually come to your channel to see a full, detailed breakdown of some of the things I've just used.
    I congratulate you on your ability for teaching, and I send a big Thank You all the way from Argentina🇦🇷⭐⭐⭐! Hope your channel continues to grow! (especially because I don't have many videos left to watch, and I know I'm gonna need em)

    • @slayingthedragon
      @slayingthedragon  Рік тому +6

      You have no idea how much this means to me and I can't thank you enough for taking the time to write me this. Thank you ❤❤❤❤

  • @person81045
    @person81045 Рік тому +1

    My only recommendations in this is to do this in post: when your saying 1 3 7 7 or whatever, show that on the grid and use an arrow to indicate that its either row or column.

  • @K4ZA
    @K4ZA 2 роки тому +6

    insanely good video! This is the kind of video where I will 100% come back in the future to check up on something I forgot. Very well structured, straight to the point and now unneccessary filler. Love it!

  • @vinayi8759
    @vinayi8759 2 місяці тому +2

    Man! I was stuck on a project and soon realized I was heading in the wrong direction by using flex instead of grid. I kind of dropped the project after losing motivation to restructure it. I saw your video, and now I’m all set to finish it. Thanks!

  • @chillplaylist2554
    @chillplaylist2554 Рік тому +4

    all I could is this Channel is a hidden gem, I was surprised when I saw you only had 50k subs but you're bound to success man, keep it up!

  • @underflowexception
    @underflowexception Рік тому +1

    Doing css again at work and forgot some concepts came back for a quick refresher merci

  • @astrahcat1212
    @astrahcat1212 6 місяців тому +3

    Memorizing and practicing this video all day. It's AMAZING that these days, as opposed to web 1.0 days, we have automatically responsive web design with the auto-fit keyword

  • @AkshayAradhya
    @AkshayAradhya 2 місяці тому +1

    I have watched about 4 video's before yours, and this video explains it 10x better.
    You show everything visually and explain each property. Exactly what we need in today's society

  • @1nxpired
    @1nxpired 2 роки тому +15

    Crazy how detailed your videos are. I watched all of them and I demand more 😜.

  • @junialdy
    @junialdy Рік тому +2

    before i watched this i thought that the grid was very hard to understand, but it all went away when i watched this. thanks for the video

  • @JohnHu1986
    @JohnHu1986 2 роки тому +277

    There were 69 likes, and I didn't want to change that. But I couldn't help but click the thumbs-up button after watching your video.

    • @slayingthedragon
      @slayingthedragon  2 роки тому +81

      Ayy ur a legend thank you, your sacrifice will not be forgotten ☺️

    • @PSProduktions
      @PSProduktions 2 роки тому +14

      I love how your brain works 😆

    • @smartynarendrasingh
      @smartynarendrasingh Рік тому +5

      And I'm watching this video on 69k views 😂❤️

    • @rabbit3en
      @rabbit3en Рік тому +1

      ​​@perfect coder we're so close

    • @lenduking
      @lenduking Рік тому +1

      This people😂😂😂...lovely content

  • @__azt
    @__azt 10 днів тому +1

    This single video has cleared out so many css concepts for me.

  • @sugo8920
    @sugo8920 2 роки тому +7

    so straight forward and easy to follow. css was very overwhelming before watching these videos but now I feel like I can place stuff on the page anywhere :D

  • @brianruiz8448
    @brianruiz8448 4 місяці тому +1

    I was about to quit on my project until I saw your video, not just I learn all that about the grids but even got motivation to continue going. Thanks a lot for sharing this content.

  • @rajdeepdas397
    @rajdeepdas397 Рік тому +3

    Man, you don't know how much of a life saviour this video has been for me. Amazing tutorial. Absolutely loved it. Excellent.

  • @katkisedpikslid
    @katkisedpikslid Рік тому +2

    Only 3 and a half minutes in, i already love this straight to the point no bs amazing tutorial, i tip my hat to you sir!

  • @2010daigo1
    @2010daigo1 2 роки тому +9

    Super concise, will be using this as reference. Thank you

  • @asterizk
    @asterizk 11 місяців тому +1

    Frankly amazing tutorial. I knew nothing about CSS grid before watching this and I feel like a wizard now. Explained at exactly the right level and absolutely zero fluff. Liked and subscribed!

  • @lil_muffin_
    @lil_muffin_ 9 місяців тому +1

    A genuine thanks from my side! I'm someone who hates watching tutorials...but I just love the way you teach and make the stuff easier!

  • @relja_
    @relja_ 2 роки тому +10

    Just found your channel, the way you explain things is so easy to follow, keep it up. And the videos are aesthetically pleasing to watch👌

  • @Aref_JD
    @Aref_JD 7 місяців тому +2

    Team TOP!
    Honestly, I stumbled upon this video while searching for a tutorial and it was the best ever.
    Not only that, but also when I was learning on the odin project platform, they featured and recommended your video, so this is the second time I watch this video, and it's always fun and intuitive, 10/10!

  • @ayaanhxss9961
    @ayaanhxss9961 Рік тому +3

    Omg I've been trying to understand this since forever. You explained it so well. I'm a visual learner so I appreciated the column/row numbered axis.

  • @debs.1037
    @debs.1037 4 місяці тому +1

    Probably the best video I've watched! Explained in a few minutes what my teacher couldn't in a whole hour.

  • @satdm9721
    @satdm9721 Рік тому +3

    started learning front end dev this year, had no real clue how to design the grids the way I want them to... found this guide very helpful.. I was using border CSS variable to visualize my sections the way i wanted them to lol and bruteforcing things in place

    • @slayingthedragon
      @slayingthedragon  Рік тому

      Yea grids were a drag to learn for me as well, I think for everyone because there's so many properties 😅

  • @Shivam-sl4sp
    @Shivam-sl4sp 10 місяців тому +1

    Highly impressive! I don't think it's even possible to beat this quality of tutorial. Perfectly paced, no BS, knowledge packed all in right amount of duration. If you made videos frequently and cover more technologies sky is the limit.

  • @niggonya
    @niggonya Рік тому +5

    please keep creating such amazing content. 0 unnecessary comments, everything explained perfectly clear and concise, easy to follow, visually appealing… i also very much appreciate that each part is timecoded, that’ll be very useful when coming back to this video.
    all in all - mad respect for you man, thank you for making these

  • @student4373
    @student4373 Рік тому +2

    This is an excellent video that gets straight to the point. Definitely better than those of other UA-camrs with filler videos such as "Why use CSS Grid?".
    We want to know how to apply them, not know about their history or advantages/disadvantages.

  • @mr_oxd2925
    @mr_oxd2925 2 роки тому +3

    I LOVE HOW simple you explain it

  • @07aldee
    @07aldee Рік тому +2

    Your visual presentation is very easy to understand and more precise than any other tutorials I watched so far.

  • @srsh12345
    @srsh12345 Рік тому +3

    Love the way you go through your videos. All the examples one after another. Makes it easier for me to connect the different concepts.

  • @vincentnguyen4204
    @vincentnguyen4204 Рік тому +1

    These videos are god-sent. You just covered like an hour of the Odin project's grid content in 14 minutes. Seriously recommend that anybody who wants to learn grid watch this video. You saved my ass

  • @Gamer_with_knowledge
    @Gamer_with_knowledge 7 місяців тому +3

    Concise and Perfect are the two words I can say.
    Extremely insightful video man 💯

  • @jungl3ist
    @jungl3ist 8 місяців тому +1

    i just love the crystal clear talk, and the straight talk of yours. No unnecessary equivocation. JUST LOVE IT

  • @PektraMom
    @PektraMom Рік тому +3

    I appreciate how you're explaining everything as it is visually appealing and easily understandable. I have a final exam of a module that will include CSS grid, flexbox, media, import (for fonts) and other stuff. You made everything so clear and I thank you for that!!

  • @lotannaezeuko7157
    @lotannaezeuko7157 Рік тому +2

    this has to be one of the best vids ive watched relating to coding. and i just know that i would still have to keep coming to this video at least once a month

  • @kiritgupta
    @kiritgupta 2 роки тому +5

    Wow, what a spectacular video on CSS Grid. I cant believe how small your channel is given how good your content. Sub'd and liked. Keep going dude, you will be big one day!

  • @tomaszmachura1422
    @tomaszmachura1422 6 місяців тому +1

    I'm so glad I found this channel! Great content!

  • @alicanuzek
    @alicanuzek Рік тому +3

    Thank you! Finally someone explaining the grid system in a simple and understandable way. You're really good at this, hope your channel grows quickly ^_^

  • @MidwestSkyline
    @MidwestSkyline 2 місяці тому +1

    This content is extremely helpful. Not too familiar with grid but I needed to have an idea to work with another tutorial. This explained a lot to the point where i could jump into the other tutorial and be comfortable, with very little time.

  • @kunalbhutani4988
    @kunalbhutani4988 Рік тому +1

    best channel and best teacher with best way

  • @john-mac
    @john-mac 2 роки тому +5

    Finally some effective and meaningful explanations! Namaste, teacher 🙏🏻

  • @klirmio21
    @klirmio21 Рік тому +1

    Thank you, I really liked your explanation. Colorful, and most importantly 13 minutes divided in sections. It’s a difficult topic and I don’t want to rewatch videos of 40+mins, so yours is the best

  • @boyapallysaiteja3222
    @boyapallysaiteja3222 Рік тому +3

    This is really Superb
    Man you way of explaining is like eating a Cheese Cake.

  • @nonsticklotion5831
    @nonsticklotion5831 Рік тому +1

    "it was perfect perfect everything down to the last minute details "
    your video explains everything clearly thank you so much

  • @ericmajano5129
    @ericmajano5129 2 роки тому +3

    Just amazing!!! Thank you so much bro, you are a real master :)

  • @ADCreativeDirector
    @ADCreativeDirector 5 місяців тому +1

    This was the best explanation I've seen yet! Amazing. Keep up the great work.

  • @tsubimekdeinmansubimekdein3898

    did The Odin Project on this topic and you video just sharpened everything even more fro me. !FOR EVERYONE, IT IS BETTER TO FIRST UNDERSTAND ATLEAST SOME OF THE GRID RULES FROM "The Odin Project" THIS VIDEO IS JUST AN EXTRA!

  • @joaopedrorodrigues9281
    @joaopedrorodrigues9281 Рік тому +1

    I had never worked with grid css before, but I was about to start a job where I would need to make a grid menu, so I tried to find some example of a grid on UA-cam and then I found this video. Man, thank you so much, I think with just 13 minutes of a great tutorial I'm ready to start coding. Thanks!

  • @bhaveshhuse6890
    @bhaveshhuse6890 2 роки тому +3

    A big thank you brother ❤❤!! Thanks to you, I have learnt flex and grid from your videos in very short span of time and in a very easy way. You deserve a subscribe 👍!!!

  • @metashrew
    @metashrew Рік тому +1

    this is exactly what i was looking for.
    this video shows what grid can do and how to do it in the most clear and concise way possible.

  • @wre0rl
    @wre0rl Рік тому +3

    Nice, The Odin Project brought me here!

  • @neelanshsharma275
    @neelanshsharma275 Рік тому +2

    my mind was blown when you made that responsive design, It's just so helpful I will definitely use it in future. Thank you and love your style of teaching :)

  • @bikashpradhan4886
    @bikashpradhan4886 10 місяців тому +1

    loved it man. simple and crisp.

  • @Kronical_Lpd
    @Kronical_Lpd 2 роки тому +3

    This is actually very pure information and it's so easy to learn with this! By the way, what keyboard do you use? It sounds really good

    • @slayingthedragon
      @slayingthedragon  2 роки тому

      Thank you 😀- It's the Razer Huntsman V2 Tenkeyless with some foam padding inside it and with the linear silent keys. It's a silent gaming keyboard for playing games and although it sounds good, it's actually not great for typing because it's so sensitive. The only reason I use it is because I'm used to it. I wouldn't suggest it for work, unless you really like the sound :p

    • @Kronical_Lpd
      @Kronical_Lpd 2 роки тому +1

      @@slayingthedragon thanks! Also it's really nice seeing a UA-cam with a lot of subs and comments reply to so many of them :D
      Keep it up and remember me when you have 100k+

    • @slayingthedragon
      @slayingthedragon  2 роки тому +1

      @@Kronical_Lpd haha I will thanks :P, I would have replied earlier but I was sleeping 😊

    • @Kronical_Lpd
      @Kronical_Lpd 2 роки тому +1

      @@slayingthedragon yeah it's all good, don't worry about it... Timezones are confusing 😅

  • @Raphael-bq1fc
    @Raphael-bq1fc Рік тому +2

    you have the best explanation ever. you've saved me 2hrs of reading. I saw both the flex and grid tutorials and they are really awesome

  • @michaellawson9353
    @michaellawson9353 2 роки тому +10

    nothing else to say than thank you and keep going like this, your tutorial is clear, goes straight to the point and makes everything so simple

  • @muffina672
    @muffina672 2 роки тому +3

    Dude, your channel is lit! Keep up the good work. Also are you planning to cover topics of ReactJS like usehooks

    • @slayingthedragon
      @slayingthedragon  2 роки тому +1

      Thank you! Yes I'm a React dev first and foremost, CSS second ☺️. I have a roadmap of videos I want to make, stuff like react, hooks, nextjs are all on there!

  • @kunal007216
    @kunal007216 8 місяців тому +1

    Just perfectly explained.
    This video summarizes all the grid videos available on youtube.
    Thanks

  • @Chiaros
    @Chiaros Рік тому +1

    This video is in a huge company's knowledge base, on the first page of the CSS section.
    Great work!

  • @joarhussain
    @joarhussain Рік тому +1

    This is the best tutorial I have ever seen. I don't mean just for CSS, the best tutorial on any topic. Keep it up, i'm glad to have found your channel.

  • @stephennmcdonald
    @stephennmcdonald 8 місяців тому +1

    I agree with the other commenters, this video is a GEM (and you just got another subscriber, over 100k now!). Great pacing, perfect visuals, I literally could not have asked for a better video. This is probably my first comment in 5 years, but I absolutely HAD to take the time to say that. Keep up the great work!

  • @drviagrin3798
    @drviagrin3798 Рік тому +1

    Grid is so awesome! You just opened my eyes up to just how powerful it is! You hardly need anything else for layout and positioning! Thank you!

  • @ChristiaanKoppelaar
    @ChristiaanKoppelaar Рік тому +2

    Wow! This is what we call a great tutorial. No nonsense, just straight to the point. Top!

  • @timothygbadegesin4673
    @timothygbadegesin4673 10 місяців тому +1

    This is the best exlpainer on CSS Grid layout I've seen so far.
    Thank you for making it so clear and easy to understand.

  • @markfriday1229
    @markfriday1229 Рік тому +2

    This a very straight forward and on point tutorial. No beating around the bush. You really did justice to CSS Grid here.
    Thanks for this amazing content Man.
    I've subscribed to your channel already.

  • @PaigeDLearning
    @PaigeDLearning 6 місяців тому +1

    Thank you for making the video. Super useful. I like how you edited the video with animation and annotation to help guide our eyes on what you meant. Please keep it up. You deserve more subscribers.

  • @sohomdas2767
    @sohomdas2767 3 місяці тому +1

    You earned one subscriber. You are a legend. Keep it up brother 💯 it helped me a lot

  • @Aiidook
    @Aiidook Рік тому +2

    No BS, straight to the point and nailing it down to the core. Full respect.

  • @elullabies
    @elullabies 6 місяців тому +1

    This is the only video about css grid i will ever rewatch to refresh my grid knowledge. Thanks a lot!

  • @PeterJohnson87
    @PeterJohnson87 3 місяці тому +1

    one of the best CSS vids I've seen so far, and thats quite alot. Very good tutorial. thanks bro.

  • @firippumartinezu1782
    @firippumartinezu1782 Рік тому +1

    I'll probably have to watch these videos a couple of times to fully understand them, but it's a great starting point. Also, the video being short helps to not feel overwhelmed. It's compact and concise.

  • @anubrataguchhait3244
    @anubrataguchhait3244 Рік тому +2

    Thanks man.. the most one shot - all kill content for beginner grid .. helps me alot 😊❤

  • @fazex4185
    @fazex4185 Рік тому +1

    That was one of the best tutorials i've seen. Straight to the point. No beating adound the bush

  • @j_axel
    @j_axel 4 місяці тому +1

    bless u dude! I was had a problem with the UI in my calendar which was in the grid and i've benn tryna fix it for over 2 hours and ur tutorial solved it all!

  • @hassanau5653
    @hassanau5653 Рік тому +1

    Starting web dev as a noob, I see people hating on CSS for how complicated and frustrating, I would understand why but watching videos like yours and making small projects just makes me love CSS. Making things out of nothing (out of code). Thank you keep it up.

    • @slayingthedragon
      @slayingthedragon  Рік тому

      Thank you and I can relate to what you're saying, I feel the same way ☺️

  • @thegreatjapaneseguru
    @thegreatjapaneseguru 2 роки тому +2

    One of the best tutorials on youtube. Keep uploading.

  • @jNayden
    @jNayden Рік тому +1

    as a backend developer I can say amazingggg amazing

  • @endisong6643
    @endisong6643 2 роки тому +2

    The best explanation for grid so far! Thanks.

  • @icchigoat
    @icchigoat Рік тому +2

    Thank you so much for making web development easy. You're the best online teacher Ive ever had and I'll forever be grateful. Your best quality is keeping things concise and straight to the point. Thanks so much again.