- One of the biggest questions people ask when they first learn about CSS Grid is, "Hey, does this replace Flexbox? "Should I use Grid instead of Flexbox?" No, that's not really how
things are gonna work. So, Grid has been
invented to do things that Flexbox couldn't do, and Flexbox is still a great tool for us to use to
do things that Grid can't do. And we're also gonna use
a lot of the other parts of CSS that we've used for
layout for a long time. Floats, for example, there'll be plenty of times to use a float. And flow, the way the
web pages get laid out, the way it's always been before CSS actually was invented,
the way content flows down the page in a block direction or an in-line direction, these are all parts of a larger picture that we'll want to understand, and put
Grid into that situation. We'll use Grid on certain
parts of the page, and not on other parts of the page. It's not like the tools
that we've been using, say, Bootstrap or Foundation,
or 960 Grid, back in the day. It doesn't handle layout
for the whole page. It handles layout for
a particular container, one container on the page, and the items that are directly, a direct
child of that container. So, you're gonna mix
Grid with other things. You'll mix Grid with Flexbox. You'll mix Grid with a basic flow. You'll mix Grid with floats,
with other kinds of things. So, why do you wanna use Flexbox? Why do you wanna use CSS Grid? Which ones should you use when? Flexbox is really great when you want to line things up in one direction. Maybe you could think of it as a whole bunch of boxes that are in an infinitely long line. Oh, but it's not infinitely long. It's actually a limited amount of space, so it happens to wrap, or doesn't wrap. Whether it wraps or not, the calculations that are being made are all happening one line at a time. The browser only ever thinks about things in one dimension at a time. It doesn't have any way to know if you happen, if you end up
with several different rows, it doesn't calculate
information across those rows, or if you're going in the other direction. It will calculate them in one direction and not in the other direction. Grid has the ability to line
things up in two directions. And in fact, Grid always wants to line things up in two directions. You can't get it to
kind of stagger things. It thinks about rows and
columns at the same time, and it's gonna wanna make
adjustments to your grid, based on what's going on in both of those directions at the same time. So, here's a diagram of a layout that you would do with Grid, where things are actually lining up in both directions. And here's a diagram of how things might work out in Flexbox, where the calculations are being done in each row, one at a time with no
regard to the other rows, and you can see that those
things don't actually line up. Perhaps, it's dependent on
the size of the content, or the size of the amount
of stuff that's on the page. Here's a diagram that
really kind of shows you what Grid is good at, and
what Flexbox is good at. There are some situations where Flexbox or Grid could be used,
where they basically do the same thing. One thing though, that Grid can do that Flexbox cannot do, is
intentionally overlap items. So if you're in a situation where maybe either one would work, but you want to overlap items, then that's gonna be a situation you definitely
want to use Grid in. Here's an example where we've got images that are content images, not background images,
but images in the content. And then, I've got a
sentence for each one, and a little background colour
on each of those sentences. The sentences are different lengths, so we don't wanna use some
sort of absolute positioning, or something that's not gonna work for different amounts of content. We're gonna use Grid for this. But we're using Grid,
we could use Flexbox, if there's no overlap, but
because there's overlap, we wanna use Grid in this situation. So, get to know Grid, get to know Flexbox. Kind of know what each one is best at, and then use whichever one is best. It depends on which one
has the super powers that you need at that moment.
