STOP The CSS Grid Confusion - 2 Ways to GRID! 

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!

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

Which is the over 20%? jejej

HAHAHA

they are way too sweet, i believe

Hahaha

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

I love hearing that (the part about the lazy professors 😂)

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/