CSS Grid Course: Why Learn It And How It Compares To Bootstrap

Key Takeaways

heyyyyyy and welcome to this free course on the CSS grid layout module CSS grid is actually a whole new way of creating website layouts it'll give you more flexibility than any other layout system or framework and it's also pretty intuitive to learn before we jump into the course I want to point out that what you see in front of you now is not a normal video it's an interactive scrim bar screen cost and that means that you as the viewer at any given time can jump into the code and change it you can for example head over to the index dot CSS and change the color value for the h1 tag let's say black then see how your changes affected the output in the simulator window here so feel free to do this whenever you feel the need for experimenting with a code so that you make sure that you properly understand what we're going through okay so why do you want to learn about CSS grid well first of all because it makes your life a whole lot easier when it comes to creating two-dimensional layouts which basically almost all websites consists so secondly as you'll see it'll make your markup significantly simpler it loads will give you a lot more flexibility when it comes to changing the layouts for example through responsiveness and it'll also enable you to actually skip frameworks like for example bootstrap and finally CSS grid is now supported by all the major browsers and the support amongst global website traffic is climbing quickly to learn exactly how many percent at the time you're watching this screencast check out this URL here now let's kick off the course by looking at the benefits CSS grid has over a framework like bootstrap here we have created two mock-ups for a website this one is done using a CSS grid and this one down here is done using bootstrap the layout contains a header a menu content and footer the mark-up is found in the examples HTML here you can see the HTML for the bootstrap example here we have the HTML for the grid example and we can instantly see that the CSS grid markup is significantly simpler than the bootstrap markup because gone are all the unnecessary row items and the ugly class names so as I mentioned CSS grid will make your markup cleaner benefit which of course would become much more apparent if we were to turn these two examples into full-blown websites however this of course doesn't tell the whole story as the grid example of course needs CSS which you can see here in the examples dot CSS here is the CSS needed to create our grid example conceptually what's happening here is that instead of trying to define the layout which is the columns and the rows in the HTML we're rather defining everything in the CSS and this brings us to our next benefit which is that this separation gives you a lot more flexibility let's say that you for example want the menu here to a pair up besides the header when it's being viewed on mobile to make this happen and our CSS grid example we simply create a media query and then we target the items which we want to change according to the new layout which is the header the menu and the content and then simply give these their new values and the result is that when we shrink the page and if you look at this CSS great example you didn't see that boom there the menu item jumped up to the top row the header moves all the way to the right and the content took up the entire second row we can change back boom like that now if we were to try this in bootstrap we'd quickly realize the downside of having the layout defined in the HTML because what you want to do here is to make this menu item jump up to the first row up here however that's not trivial because the menu item is already trapped in the second row down here and in order to move it up to the first row you actually have to change our markup you have to cut away this element down here and a stirring up here that's not something you can do based upon a simple media query in CSS you can of course do it in JavaScript but that's hacky and more complex so what you want to do instead is learn CSS grid and I'm gonna teach you that in this course so just sit tight and we'll start the next lecture right away