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.