Check out a free preview of the full CSS In-Depth, v2 course:
The "Flexbox vs. Grids" Lesson is part of the full, CSS In-Depth, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Estelle discusses the role of Flexbox vs. grid and where to use each.

Get Unlimited Access Now

Transcript from the "Flexbox vs. Grids" Lesson

[00:00:02]
>> Estelle Weyl: So with grids, let's start talk come a little bit about flex box before we go on with grids. So grids, flex box is when you want to do basically two dimensional lay-out. Which is you just add an element just go to cross the line. So here I have a bunch of cells, and they're laid out really nicely, right?

[00:00:26] This looks like a grid. This is done in Flexbox. As you can see it says display flex, flex flow, row, and wrap, so that's why number four is wrapping. I'm basically giving it a flex basis of 250 pixels. So it's 250 pixels but it can grow if the page needs to grow.

[00:00:46] So these are not actually exactly 250 pixels wide. They're probably 300 pixels wide. I put a margin of 10 pixels because it looks like a nice little gutter in between all of them. But then if I change the last-of-type number 12 to display none, look what happens. Because this is a very simple thing, it actually doesn't look that bad but generally, you want them to lay out correctly.

[00:01:10] If you remember from our flex box examples with the kittens yesterday, I used to hack to make them all line up nicely. So even if there wasn't the same number of kittens on the bottom row, it's still lined up with the rows above it. Generally people what this, the gutters to line up really nicely.

[00:01:31] It looks even worse if you do nth last of type, and then li:nth-of-type(11). And that might actually be nice in your layout, but if that had just a little picture of a kitten on the side, and it grew that big, it would be ugly, right?
>> Estelle Weyl: Or you'd have that huge kitten on the bottom.

[00:02:02] So Grid allows us to actually get rid of that last item. If you look at number 12 down at the bottom, and I display none, the lines still match up nicely, right? And if I do li:n,
>> Estelle Weyl: Of type 11,
>> Estelle Weyl: It also still lines up nicely. There is a few other things a grid can do.

[00:02:39] In this case I actually said I want number four to span two columns.
>> Estelle Weyl: In this example here, I have a test grid, which you can see is number 4, cuz it goes from 3 to 5. So I moved it, I brought it down here. I said, I wanted to the grid column to start in the second column and go all the way to the eighth.

[00:03:09] And I want the grid row to start from the third and go all the way to the fifth. So it would take up 2 rows and 6 columns. I could have said 5 and 1.
>> Estelle Weyl: That was a lot of hard work for me to re-code that layout now wasn't it?

[00:03:29] That is one of the powers of grid. Grid is actually much more powerful than that but what we're gonna do today is we're gonna cover grid in short form. Because there's another CSS mastery class where they spend a full day talking about grid and flex box. So I am not going to go into it as deep detail.

[00:03:44] If you really want to learn the grid super well, take that workshop. But we are going to cover the basics so that you're able to read up on it more and you're able to play with it. And then when you're ready to deep dive and really learn all of the features, you'll have a general understanding of the features.