Learn CSS Grid - A 13 Minute Deep Dive

Ғылым және технология

🚨🚨🚨 COURSES - slayingthedragon.io 🚨🚨🚨
Discord - / discord
Source code: github.com/RamziBach/Learn-CS...
Grids are two dimensional, I can place things on it horizontally, vertically and both simultaneously. Actually I can position items in any way I want, even stacked. Each number represents a line, these lines are row lines and these lines are column lines. Our grid is made up of cells, each square is a cell. And finally, our grid is also made up of tracks, these are the rows and these are the columns.
0:00 Intro
0:24 Creating a grid
0:45 grid-template-rows & columns
1:17 Positioning Items
1:48 grid-row & grid-column
2:10 span keyword
3:01 grid-area
3:29 Negative numbers
3:45 Layering items
4:32 grid-auto-rows
5:29 grid-auto-flow
5:40 grid-auto-column
5:51 Fractional units
6:43 minmax()
7:10 repeat()
7:39 grid-gap
7:53 grid-template-areas
9:55 justify-items & align-items
10:53 justify-self & align-self
11:20 justify-content & align-content
12:20 auto-fit

Пікірлер: 782

  • @slayingthedragon
    @slayingthedragon8 ай бұрын

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

  • @theexile4694

    @theexile4694

    5 ай бұрын

    Answered all my questions. Thank you so much.

  • @codingman8056

    @codingman8056

    3 ай бұрын

    You defainately deserver like and comment on this video

  • @musuuzanicholas4506

    @musuuzanicholas4506

    Ай бұрын

    Thanks !

  • @akmzahidulislam2764
    @akmzahidulislam2764 Жыл бұрын

    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

    Жыл бұрын

    I appreciate your words, thank you very much 🙏

  • @AudioMulch4

    @AudioMulch4

    Жыл бұрын

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

  • @user-zj6iz1rl8d

    @user-zj6iz1rl8d

    2 ай бұрын

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

  • @oldo7
    @oldo72 ай бұрын

    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

  • @lucas.contreras89
    @lucas.contreras893 ай бұрын

    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!

  • @Gamer_with_knowledge
    @Gamer_with_knowledge8 күн бұрын

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

  • @JohnHu1986
    @JohnHu1986 Жыл бұрын

    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

    Жыл бұрын

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

  • @PSProduktions

    @PSProduktions

    Жыл бұрын

    I love how your brain works 😆

  • @smartynarendrasingh

    @smartynarendrasingh

    Жыл бұрын

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

  • @rabbit3en

    @rabbit3en

    Жыл бұрын

    ​​@perfect coder we're so close

  • @lenduking

    @lenduking

    10 ай бұрын

    This people😂😂😂...lovely content

  • @enriquemoyamx
    @enriquemoyamx Жыл бұрын

    You are destined to succeed my friend. I was asking myself, why does this guy only have 10K subscribers? Then I realized you just started your channel not long ago. The delivery, the visual cues, everything is on point. Keep doing what you're doing because you will get to 100K in less than a year.

  • @slayingthedragon

    @slayingthedragon

    Жыл бұрын

    Wow thank you so much !! Much love ❤❤❤

  • @wesleysilveira5692

    @wesleysilveira5692

    3 ай бұрын

    you were right, he is now 90k, almost 100k

  • @salahhatem4601
    @salahhatem4601 Жыл бұрын

    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

  • @slayingthedragon

    @slayingthedragon

    Жыл бұрын

    Thank you so much ❤❤❤

  • @basmalabasmala7176

    @basmalabasmala7176

    3 ай бұрын

    absolutely right same here

  • @samopaul
    @samopaul Жыл бұрын

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

  • @rysiu133
    @rysiu1337 ай бұрын

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

  • @ivanoviich5847
    @ivanoviich5847 Жыл бұрын

    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

    Жыл бұрын

    Thank you so much ❤❤

  • @ivanoviich5847

    @ivanoviich5847

    Жыл бұрын

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

  • @anthonyyoung7949
    @anthonyyoung7949Ай бұрын

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

  • @jungl3ist
    @jungl3istАй бұрын

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

  • @sagarkrishna14
    @sagarkrishna145 ай бұрын

    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.

  • @drviagrin3798
    @drviagrin37985 ай бұрын

    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!

  • @srsh12345
    @srsh123458 ай бұрын

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

  • @michellecameron1983
    @michellecameron19835 ай бұрын

    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!

  • @rajdeepdas397
    @rajdeepdas39711 ай бұрын

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

  • @simpleedge
    @simpleedge Жыл бұрын

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

  • @slayingthedragon

    @slayingthedragon

    Жыл бұрын

    Thank you ☺️ ❤️

  • @sugo8920
    @sugo8920 Жыл бұрын

    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

  • @chillplaylist2554
    @chillplaylist25549 ай бұрын

    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!

  • @timothybridge8662
    @timothybridge86626 ай бұрын

    Thank you so much for this! These videos suplement the learning on my course so much. I hadn't realised how powerful grid was. Definetly subscribing!

  • @mohammedafzal4343
    @mohammedafzal43438 ай бұрын

    Bro is casually dropping powerpacked CSS content.

  • @edwardgr1698
    @edwardgr1698 Жыл бұрын

    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

    Жыл бұрын

    Thank you so much ❤

  • @porobertdev

    @porobertdev

    6 ай бұрын

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

  • @1nxpired
    @1nxpired Жыл бұрын

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

  • @slayingthedragon

    @slayingthedragon

    Жыл бұрын

    Thank you ☺️, more videos coming !

  • @Olderaccount17
    @Olderaccount17 Жыл бұрын

    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

    Жыл бұрын

    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 ❤❤❤❤

  • @PektraMom
    @PektraMom Жыл бұрын

    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!!

  • @Aiidook
    @Aiidook Жыл бұрын

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

  • @shahnoormughal6553
    @shahnoormughal6553 Жыл бұрын

    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!

  • @jemifajne7531
    @jemifajne7531 Жыл бұрын

    That's impressive. I couldn't find a video, where I could learn the basics of css grid, found your video, and that's a brilliant. Subscribed and liked and gonna watch more of your videos. Thanks again.

  • @07aldee
    @07aldee6 ай бұрын

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

  • @asterizk
    @asterizk3 ай бұрын

    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!

  • @LongLiveRam
    @LongLiveRam7 ай бұрын

    Your style is very unique. It is very informative and straight to the point without any distractions. You just earned yourself a subscriber!

  • @yatin1370
    @yatin1370 Жыл бұрын

    Both your flexbox and grid videos helped to not give up on my current CSS journey. You made it most simpler and bearable to understand to not get frustrated. Thank you.

  • @Raphael-bq1fc
    @Raphael-bq1fc Жыл бұрын

    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

  • @ayaanhxss9961
    @ayaanhxss9961 Жыл бұрын

    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.

  • @alicanuzek
    @alicanuzek7 ай бұрын

    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 ^_^

  • @ChristiaanKoppelaar
    @ChristiaanKoppelaar Жыл бұрын

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

  • @habsi70
    @habsi70 Жыл бұрын

    You did such a great job! Thank you. Clear, concise - one of the best explanations I saw for grid.

  • @katkisedpikslid
    @katkisedpikslid6 ай бұрын

    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!

  • @timothygbadegesin4673
    @timothygbadegesin46733 ай бұрын

    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.

  • @K4ZA
    @K4ZA Жыл бұрын

    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!

  • @slayingthedragon

    @slayingthedragon

    Жыл бұрын

    Thank you so much ☺️☺️

  • @sirenhanced6248
    @sirenhanced62489 ай бұрын

    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.

  • @kairu9373
    @kairu937310 ай бұрын

    I don't know why you still have less subscribers, but you are awesome, straightforward, and explains your topic very well. I will surely come back here very often for sure. You earned my sub, and you deserve more!

  • @metashrew
    @metashrew11 ай бұрын

    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.

  • @student4373
    @student43737 ай бұрын

    This is an excellent video that gets straight to the point. Definitely better than those of other KZreadrs 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.

  • @neelanshsharma275
    @neelanshsharma2759 ай бұрын

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

  • @kunal007216
    @kunal00721619 күн бұрын

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

  • @lldadb664
    @lldadb664 Жыл бұрын

    I've only watched this and the flexbox videos so far, but they are both great. I look forward to watching more of your content. Thanks!

  • @shobyvinci
    @shobyvinci6 ай бұрын

    All I needed and more, covered in just 13 mins! Thank you so much!!

  • @stephennmcdonald
    @stephennmcdonald24 күн бұрын

    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!

  • @slayingthedragon

    @slayingthedragon

    24 күн бұрын

    Thank you I appreciate it !

  • @wheezing3586
    @wheezing3586 Жыл бұрын

    PLEASE make more of these, the way you teach is amazing

  • @lotannaezeuko7157
    @lotannaezeuko7157 Жыл бұрын

    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

  • @fazex4185
    @fazex418510 ай бұрын

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

  • @lil_muffin_
    @lil_muffin_Ай бұрын

    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!

  • @daver3270
    @daver32706 ай бұрын

    The content, and the delivery are top notch. Amazing work!

  • @FrostBoxer
    @FrostBoxer3 ай бұрын

    Brilliant, concise and detailed video, will definitely come back to refer to this when I inevitably forget how all this works again

  • @klirmio21
    @klirmio21 Жыл бұрын

    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

  • @firippumartinezu1782
    @firippumartinezu1782 Жыл бұрын

    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.

  • @arashsani6719
    @arashsani671910 ай бұрын

    I feel so lucky that I have found your channel great work my friend I hope to see more and more tutorials from you Thanks for everything!

  • @Katie-mk8uv
    @Katie-mk8uv6 ай бұрын

    this is easily the best video i have seen on css grids, saving my final in less that 15 minutes, i hope you have a lovely day!!

  • @relja_
    @relja_ Жыл бұрын

    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👌

  • @slayingthedragon

    @slayingthedragon

    Жыл бұрын

    Lovely comment, thank you ☺️

  • @Shivam-sl4sp
    @Shivam-sl4sp3 ай бұрын

    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.

  • @cokdillihayat-multilinguallife
    @cokdillihayat-multilinguallifeАй бұрын

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

  • @sparrowhawk_
    @sparrowhawk_11 ай бұрын

    Fantastic video. Straight to the point. Helps you understand the content quickly without fuss. Thank you.

  • @rohansingh6329
    @rohansingh63295 ай бұрын

    watched other videos on css grid that were around 1hr, 1/2 hr long but did not understand the concept of grid and here in just 13 minutes i understood everything thanks for sharing such amazing content hope to come back to this channel for more such videos 😊

  • @vilassa
    @vilassa9 ай бұрын

    You have the ability to simplify a complex subject. Your tutorials are complete and concise. Wow, I'm impressed! Keep up the good work!

  • @vampbat
    @vampbat11 ай бұрын

    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!!!

  • @user-wp2eu9mx9z
    @user-wp2eu9mx9z3 ай бұрын

    man ur videos r insane! everything is covert in a way that u actually can understand. thank u

  • @Aref_JD
    @Aref_JD12 күн бұрын

    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!

  • @UsernameR8
    @UsernameR86 ай бұрын

    This is amazing. It helps a lot especially if you already know CSS grid and you’re trying to recoup your knowledge

  • @fardin.faruqi
    @fardin.faruqi10 ай бұрын

    You are awesome bro!! Every time i get confused i just jump to the playlist i created and watch this. This type of video really helpful for refreshing brain.

  • @joaobeltrami6521
    @joaobeltrami65218 күн бұрын

    Amazing video! Really good starting point for people learning CSS grid. Thank you

  • @LENTINVALENTIN
    @LENTINVALENTIN Жыл бұрын

    Such a slay again! Thanks I think this would've taken me a week. I just got it in an hour by rewatching of course but the way you concisely presenting it, makes it so tangible! I appreciate.

  • @slayingthedragon

    @slayingthedragon

    Жыл бұрын

    That makes me happy, thank you ☺️❤️

  • @aichampionofficial
    @aichampionofficial2 ай бұрын

    Your content is very easy to consume - I love that you explain the logic, benefits, and implementation methods in the quickest possible way. You are now my go to guy for refreshing my CSS knowledge and learning new CSS concepts. #Respect

  • @kayvxx
    @kayvxx2 ай бұрын

    OMG, this is what I need, simple and straight.. thanks mate 🙌🔥

  • @bagheldevansh
    @bagheldevansh Жыл бұрын

    This is such an awesome video, thank you for making this, i was struggling so much with grid before this!

  • @user-vo3hw8ri5e
    @user-vo3hw8ri5e3 ай бұрын

    Thats literally everything i want to learn about GRID. Thanks man, you are just awesome.

  • @Chiaros
    @Chiaros7 ай бұрын

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

  • @abinashpradhan74
    @abinashpradhan74 Жыл бұрын

    One of the best tutorials on youtube. Keep uploading.

  • @niggonya
    @niggonya Жыл бұрын

    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

  • @slayingthedragon

    @slayingthedragon

    Жыл бұрын

    Thank you ☺️

  • @bikashpradhan4886
    @bikashpradhan48862 ай бұрын

    loved it man. simple and crisp.

  • @endisong6643
    @endisong6643 Жыл бұрын

    The best explanation for grid so far! Thanks.

  • @anubrataguchhait3244
    @anubrataguchhait32446 ай бұрын

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

  • @nonsticklotion5831
    @nonsticklotion583110 ай бұрын

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

  • @BinaryBro-yq8nz
    @BinaryBro-yq8nz4 ай бұрын

    These are the types of videos I want from every coding channel. Great Work Brotha Appreciated. keep it up 👏👏👏

  • @AniSparkz
    @AniSparkz6 ай бұрын

    Cleared all of my doubts regarding css. Thanks for making this tuto

  • @Chike_Odor
    @Chike_Odor3 ай бұрын

    I can not tell you how helpful this has been thanks

  • @markfriday1229
    @markfriday1229 Жыл бұрын

    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.

  • @slayingthedragon

    @slayingthedragon

    Жыл бұрын

    Thank you ☺️❤️

  • @zues3663
    @zues36633 ай бұрын

    bro out here saving everyone's time, these are the kinda channels i subscribe to!

  • @kothecompetitor
    @kothecompetitor Жыл бұрын

    the best grid video I've seen so far. your kind of explaining is the best for me fast, clear, and informative 👌 thank you so much

  • @slayingthedragon

    @slayingthedragon

    Жыл бұрын

    Thank you 😊❤

  • @joaopedrorodrigues9281
    @joaopedrorodrigues92816 ай бұрын

    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 KZread 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!

  • @user-zw9mx5co4h
    @user-zw9mx5co4h7 ай бұрын

    Best video on css grid. Insanely easily explained in a short time

  • @oscarchan5684
    @oscarchan5684 Жыл бұрын

    Thank you so much! It is the best tutorial on CSS grid I have ever seen.

  • @dsim99
    @dsim998 сағат бұрын

    Thanks for being so concise and saving us so much time 🙏

  • @TonysTestKitchen
    @TonysTestKitchen9 ай бұрын

    That was an amazing video. Absolutely crushed that

  • @kitten1122
    @kitten1122 Жыл бұрын

    your videos are so helpful and easy to understand. thanks so much, i really hope you continue creating!

  • @saravanan-subramanian
    @saravanan-subramanian Жыл бұрын

    Masterful presentation! Just the video I was looking for to refresh my understanding on this! Thank you!

  • @pazabarca3189
    @pazabarca3189 Жыл бұрын

    Thank you so much for your practical and direct video, it is rich in knowledge and I assure you that I'm going to come back to watch it again when my memory gets lost. Subscribed!

  • @polimorphic13
    @polimorphic13 Жыл бұрын

    Thank you for this content. This really helped me to understand the better grid concepts, and even to learn some new ones.

Келесі