Placeholder Image

Subtitles section Play video

  • - 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.

- One of the biggest questions people ask

Subtitles and vocabulary

Click the word to look it up Click the word to find further inforamtion about it