STOP The CSS Grid Confusion - 2 Ways to GRID!
Vložit
- čas přidán 14. 01. 2020
- Go to www.get.online to search for your (dot)ONLINE domain now!
-- Hey all, today we're going to cover the CSS grid, and specifically how to structure a layout using the CSS grid implicit and explicit methods!
Codepen (not responsive, maybe you can make it responsive using media queries and the CSS grid properties!?):
codepen.io/designcourse/pen/r...
Let's get started!
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
My site: designcourse.com
My personal FB account: logodesigner
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Coursetro.com.
Come to my discord server or add me on social media and say Hi! - Jak na to + styl
Omg I'm at 499k. Much excitement I guess? Help me hit that mark by subscribing if you enjoyed this!
I need to make a 3 column website 2 column, how?
Well deserved, thank you for providing quality educational content on a regular basis.
I can't subscribe now to help you reach 500K, sorry... because, I AM ALREADY SUBSCRIBED OF COURSE!!! Your channel rocks!!!! You make it look so easy and explain everything well... A huge thank you for sharing your knowledge.
Hi Gary, Your channel is perfect match for my needs. As a student I have many questions about FrontEnd and your videos answer them all. Please make one video on making complex template through Bootstrap. It help us to understand the complex part of the development. A Bigg thank you, Gary. 😊
@@nilen Using CSS Grid you have a few options. You can define grid-template-areas or use ideas shown in the video with numbered columns and rows. Then, at a break point (from a media query), you can redefine the grid in similar ways. Hopefully this helps!
CSS grid is revolutionary.
Rudra Pratap Sinha from 2012
@@boukhadc hmm... browser support was just catching up in the last two years! so in 2012, even though it existed, not a lot of support was there.
MrAndi1281 yeah 2017 was the year we could say it is supported you are right.
Yup!!
Finally 80% grid confusion is solved! Thank you so much!! :)
Which is the over 20%? jejej
I've done several grid tutorials and this one really helped the most. You can't set the css correctly when you're just learning grid and more time is spent just giving you a list of attributes. The illustrations made all the difference for me and I'm ready to design my grid now. Thanks!
This is one of those things where you look at several tutorials and see multiple that are not as helpful for whatever reason, maybe you feel like they aren't explaining things well, or they are going about things in this roundabout way, or skimming over some crucial aspect or whatever, or they assume some prerequisite knowledge you may not have, and it just makes it hard to understand 100%. Then you watch this one and it just clicks so much easier like -- "why didn't people explain it this way to begin with." I guess the usefulness of tutorials can vary for lots of reasons including your skill level, but this is the one that helped me the most. Very simple and to the point and easy to follow and I now understand enough about grids that I can immediately begin using them.
"get the diabeetus in 1 week wth our candies" lmao
HAHAHA
they are way too sweet, i believe
Hahaha
That was PERFECT!
This helped me a lot and now I understand CSS Grid properly.
Man I just wanna thank you for all the hard work you do for us, it's amazing!
I recently came across your videos, and now I am a fan...I learn from you everyday.
dude, you're an awesome teacher. i've been using wordpress for years and back in the day i used to code html and css but got lazy. recently been trying to get back into front end devlopment and your tutorials are the best i've found. keep up the good work. :)
Finally... ! Best tutorial for anyone who wants to learn css grid.
Very well explained and clearly even for those who are starting.
This has become my bible for grid tutorials! Thank you for rockin it !!!
How did you know I was watching your other CSS grid videos? I simply can't believe the impeccable timing of this video. Thanks Garry
I know because I'm watching you... I watch all of my subscribers -- it's a reciprocal relationship. I know a guy at the NSA.
@@DesignCourse Can't say I don't believe you. Can I? Can the NSA guy be a mutual friend? :DD
This video was SO good! I’ve been racking my brain about a week, trying to figure out CSS Grid. Honestly, thank you! :)
I finally get it... Thank you so much man, your explanation is an infinite times clearer than anything else I could find
This is the best...I watched about 4 different series of tutorials and finanlly understand how it works...
Finally understand grid pretty well. I’m learning web development and none of the courses I’ve done cover the topic very well
Be careful what order you place your HTML elements. Screen readers tend to rely on the actual placement of the HTML tags and not how it is rendered on the page after css. You do a great job I enjoy watching your videos. Cheers and keep up the great work.
Thanks so much man. I literally just finished the CSS Grid course on FreeCodeCamp and your video helped me understand how these concepts are applied to a real website page.
this is the simplest way to understand a very powerful css tool..thank you so much Gary
Excellent tutorial. Finally CSS Grid makes sense and its so powerful and easy for as newbies!
i was on the struggle train with this, for real, but now i get it!! thank you!!!!! Ive subscribed.
Thank you soooooooo much for this. This was the most clear explanation for someone that learns visually.
i dont know how you do it , but bro. YOU EXPLAIN EVERYTHING LIKE YOU ARE TALKING TO 10 YEARS OLD KID, AND IT FCKIN WORKS!!!!!!!!!
Dude I've been struggling the last few days trying to wrap my head around the grid concept. This was a great explanation man thank you!
Thank you very much. Love the visuals!
Wow. Sir, you always have an amazing tuturials. Ive been watching your videos and i learn a lot from it. Thank you.
This is my fourth video on CSS grid and it finally made sense. Thank you! :)
Yet another amazing video!
Thanks sir, understanding grid in one solution. Really amazing
Great tutorial, love the explicit example!
you also can use img instead css background and instead background-size use object-fit property for image
This helped me a lot in working with grids, Thanks!
You made it simple, I was really struggling to understand grids...Thank you
best video on css grid ever released!
Maan, you are awesome
Never used Grid before
But now, am implementing it on a site that should be going to production soon.
Awesome!!
Thank you so much this course has helped me so much
Stupendous performance 👏
Thanks a lot, simon. I had trouble a long time with this. Finally I got it from you brother
Amazing course. Thank You.
Never seen a better explanation.
Solid video! Helped me out a ton!
This was really helpful, thanks!
I've ended my relationship with the bootstrap grid(and general) since I met this
Man... thank you so much for this awesome tutorial!
Thank you for these amazing videos. They solve a lot of confusions and misunderstandings for me. You are much more helpful than most of my lazy profs!
I love hearing that (the part about the lazy professors 😂)
Solved a lot of my confusions.
Thanks man
Your'e a boss Gary, thank you for all the work and help. Much appreciated!
Wow, didn't know that it was this simple. Excellently Explained. 10/10 would learn again.
this is pure gold 👍
This is so good. Thank you.
this was so helpful. Thank you
Your content is amazing and really fun to watch! You've definitely earned my sub =)
Wow, I searched a lot and did't understand the Grid as I understood it now .. Thank you very much.
Dude! You are amazing at explaining. Thanks a lot
This is awesome! Thanks for your amazing videos!
Thanks a lot
it's amazing
I finally understood the GRID structure
Excellent job!
Fantastic Video! Thank you!
I'm using grid currently to structure a wine review api I'm fetching. I definitely struggled with it a bit, but was able to get it to look the way I wanted it to, this video is super helpful and I wish I had it a day ago XD. At the very least, it explained it better~
@DesignCourse 3:03 for future grid teachings may want to occasionally include an animation shifting the grid numbers from centers to starts, this seems to be a consistent pain as most have been conditioned to expect the numbers to be conceptually centered to the respective grid but it almost uintuitively starts on the edges/joints
Bro, your channel is awesome! Got a new subscriber! Thanks for the videos
This will save me a lot of development time, thanks 👍🏾
Great explanation! I always understood block layouts and flexbox - but grid seemed like a different ball game.
Excellent demo.
Thank you sooooo much! This is very helpul and saved me a lot of time
that was awesome, subbed!
super amazing tutorial
Thank you very much, it really helped me a lot! 🎉
Dude you are simply the best! greeting from Austria :D
This is a fantastic tutorial !!!
Thanks. Super helpful!
It's very useful, thanks a lot!
This video was awesome. Continue
Thanks so much. This is much more clear now 👍
good tutorial. Thanks for this !
Very nice work sir
This was awesome. Thank you so much!
Just awesome! Thanks a lot!
Annother great video Gary thanks
I nearly managed to be able to replicate it all.
But I got a bit lost on the section class elements
This is very helpful. Thank you! 😁😀
Great job!
Thanks, well taught!
Great content. Thanks.
2.45 - three rows, not columns. Very good videos! Subscribed
This is absolutely madness !!
Can you please make a video about animation in using css grid ??
For instance, I wanna make wipe transition to reveal the content.
Super Video! Ich habe für 2,00 CHF Applaus gesendet. 👏
Finally got grid system...thank you
Man thank you soo much for this tuto
I use grid template areas whenever I use grid. It makes shit super simple.
Quick question... when would you use flexbox then? For example, for a single page application, wouldn't you use flexbox instead of grid?
@@AccessCode101 I pretty much only use Flexbox to make containers space evenly. So pretty much I only use flexbox to justify-content: space-between. Everything else I've had to do for my job I haven't had any problems using grid. I deal with a lot of pixel perfect layouts in my job where all spacing is exact down to a few couple pixels. There really isn't much flexing going on. I just prefer to use grid as often as possible. I absolutely love grid template areas to move things around especially since it kind of gives you a visual while typing it out. Ever been to a fast food place and they have digital menus instead of paper? (In the US) Well, that's my job. Large corporations generally like everything on their screens exact and I've found grid to be the easiest way to accomplish that personally. As for a SPA I don't see how any of that differs when using React or Vue or Angular or whatever else. It all updates dynamically. All the CSS is scoped per component and you can have grids inside of grids inside of grids without any problem and with the fractions, min-content, max-content or anything else you can accomplish whatever you need with grid.
@@AccessCode101 For example SPA main grid for your overall website layout. Then with a section in the middle that updates inside of that section in the middle you can use grid template areas to layout all of your individual components like forms or whatever else.
Form grid:
grid-template-areas:
". title ."
"formContent formContent formContent"
". . submit";
In formContent you just spit in all your divs and each div contains inputs.
Input grid:
grid-template-areas:
"label input"
. validationCheckError";
It kind of gives you a visual representation of how each component lays out just looking at the CSS. The validationCheckError would just have either a fixed height so there is always room for it whether or not it's needed or you could use min-content on that row's height and with an dom if statement it only takes up space if it is actively stamped to the DOM.
@@AccessCode101 short answer is you can nest multiple grids inside of each other. I found this that may help explain maybe? gridbyexample.com/examples/example21/
Very good. Thank you !
You are awesome bro 👍🏼
great tutorial
Great job Bro... Thanks..
Gary Simon: ""Hopefully you enjoyed that..."
Me: "Ënjoyed is an understatement... I loved every bit of it, especially while coding along, and pausing to wonder why I cant like the video multiple times!"
That was fantastic. Chalk up another sub.
Ace, as always Gary!
Nice and simple 👍
THANK YOU SIR!!!!
Get a screen recorder that can transition between 2 displays. It's really annoying having to switch between programs on only one display.
You are the best!
Este tipo es un capo.