when they first learn about CSS Grid is,

最常問到的是

"Hey, does this replace Flexbox?

這可以取代 Flexbox 嗎？

"Should I use Grid instead of Flexbox?"

我該使用Grid，而不是Flexbox嗎？

No, that's not really how things are gonna work.

不，情形不是這樣

So, Grid has been invented to do things that

Grid能做到Flexbox不能做到的事

Flexbox couldn't do, and Flexbox is still

Flexbox仍然我們的好工具，能做到 Grid不能做到的

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

老舊的 CSS 技巧來佈局

of CSS that we've used for layout for a long time.

例如， floats

Floats, for example, there'll be

很多時候都會使用到 float

plenty of times to use a float.

而網頁流動的佈局方式

And flow, the way the web pages get laid out,

早於CSS發明之前

the way it's always been before CSS

內容流動的方式

actually was invented, the way content flows

向頁面下的 block 方向

down the page in a block direction

或 inline 方向

or an in-line direction, these are all

這些都是整體的一部份

parts of a larger picture that we'll

我們要理解，並將 Grid 放進其中

want to understand, and put Grid into that situation.

我們會在頁面某部份使用 Grid

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,

比如當年的 Bootstrap或Foundation，或960 Grid

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.

所以，你會混合使用 Grid 跟其他東西

So, you're gonna mix Grid with other things.

你會將Grid混合Flexbox使用

You'll mix Grid with Flexbox.

你會將Grid配合基本流動

You'll mix Grid with a basic flow.

你會將Grid混合floats，跟其他東西

You'll mix Grid with floats, with other kinds of things.

那你為什麼要使用Flexbox？

So, why do you wanna use Flexbox?

你為什麼要使用CSS Grid？

Why do you wanna use CSS Grid?

你應該在什麼時候使用哪個？

Which ones should you use when?

如果你想要往一個方向排列

Flexbox is really great when you want to

Flexbox 很有用

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

Grid 能夠排列兩個方向的東西

and not in the other direction.

事實上，Grid總是想要

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

顯示了你會用Grid

those directions at the same time.

來排列兩個方向的東西

So, here's a diagram of a layout that

這圖顯示了

you would do with Grid, where things

在 Flexbox 時

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,

Grid擅長什麼 Flexbox擅長什麼

or the size of the amount of stuff that's on the page.

有些情況 Flexbox 或 Grid 是通用的

Here's a diagram that really kind of shows you

它們做同樣的事

what Grid is good at, and what Flexbox is good at.

有一件事，Grid可以做

There are some situations where Flexbox

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

那你肯定想要使用Grid

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,

我們將使用Grid

so we don't wanna use some sort of absolute positioning,

我們使用Grid 但我們也可以使用Flexbox

or something that's not gonna work

如果沒有重疊的話 但是因為有重疊

for different amounts of content.

我們想在這情況下使用Grid

We're gonna use Grid for this.

所以，了解Grid，了解Flexbox

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.