1. Introduction

1.1 Introduction

Hello and welcome to Bringing CSS Grid Layout and Flexbox Together. My name is Craig Campbell and I will be in your instructor. In this course, we're going to talk about how you don't have to choose between whether to use the CSS grid layout system or the Flexbox model when laying out your websites in CSS. Instead, we're going to explore the strengths of both of these systems by building our own layout using a combination of the two. Now keep in mind that this is not an introduction to either of these systems. So I'm going to assume that you have at least an introductory level knowledge of the grid layout system and the Flexbox model. And with that said, I wanna thank you so much for watching and we'll get started in the next lesson.

1.2 Comparing Flexbox and the Grid

Hello, and welcome back. In this lesson, I want to have a brief discussion about the differences between Flexbox and the CSS grid layout systems. Now, one thing we are not going to get into in this course is the issue of browser compatibility, because that changes all the time. So if you are watching this video three months after I record it, then the information might change by the time you see it. So, there is always websites like caniuse.com where you can go to check on the current status of browser compatibility. But I really just wanna focus on the specifications themselves. I wanna focus on how we can use the grid layout system together with Flexbox to layout our websites in the most effective manner possible. So I've got a few code pens open here. This is nothing that we're gonna be editing, I just wanted to kind of give you a brief illustration of these different layouts, or these different models, in action. This first one is built with Flexbox. The second one, which looks identical, is built with the Grid Layout system. So, as you can see, these two systems have a lot in common. They can achieve some of the same things. But it's important to point out that these two systems are designed with different things in mind. The Flexbox system is designed to lay something out in one dimension, either as a row or as a column. Now, those rows and columns do have the ability to wrap around to the next line, but for the most part you're really just building something along a single axis. If we look at this Flexbox layout here, it looks like a two dimensional grid that we're using, but this is really, again, just a one dimensional grid. We basically have one long row that's wrapping to the next line whenever it reaches the end of the preceding line. So we have our header that takes up a full row. And then the sidebar, main-content, and other sidebar are really part of the same header and footer row. They're all part of the same row, it's just wrapping around. You can see that in our Container here, it has a display of flex, and a flex flow property of row wrap. So you can set these up either as a row or as a column. The Grid Layout system, however, is much more complex than that. The Grid Layout is designed with two dimensions in mind, with rows and columns. So even though we have the same layout here on the screen, it's built much differently. So you can see that we have these template areas set up. And each of these template areas, you'll see that there are one, two, three, four, five, six, seven, eight, nine different template areas. We've created basically a three by three grid here. And our header is taking up the top three grid areas, or the top three grid cells of that grid. So our header is taking up the entire top row. And so, even though we're seeing the same end result here, with the grid system that we saw with the Flexbox system a moment ago, it's actually built or structured in a much different way. And we can see, if we look at this third example, that when you're using the grid system, you can actually get much more complex with your layouts than you could with the Flexbox system. Again, with the Flexbox system, you can have a row, a single row, but you can't have a row and a column. That row can wrap and make it look like you have columns, but it can't do something like this. If you take a look at this more complicated layout, you can see that this isn't just rows that are wrapping. We have rows and columns defined, and each one of these sections has some very specific layout options for where it's supposed to be and how much space it's supposed to take up. So the general rule of thumb when you're deciding whether to use the grid system or the Flexbox system is a matter of dimensions. Are you laying something out in two dimensions or one dimension? Do you need columns and rows, or are you just laying things out in a single row, or a single column? So usually, you would use the grid layout system with the overall layout of your website, or of your webpage. So your grid system would set up your header, your footer, your columns, things like that. And inside your header you might have something like a main nav unit where you want to spread out the navigation elements on your menu bar. And something like that, that's just spread out along one dimension, you're going to have a lot more luck using Flexbox with that because it's designed with some very helpful layout options for aligning things along a single axis. so a lot of what I've said so far is kind of difficult to grasp when we're just talking about it. So in the next few lessons we're going to be building a web page that makes use of both the Grid Layout system as well as the Flexbox model. So we'll be using grid layout for the overall layout of our page, and then we'll be using Flexbox here and there when we need it. So thank you for watching, and we'll get started in the next lesson.