昨天第二週才剛開始，

今天想說先換個跟 Flexbox 不太一樣的東西。

於是就看到這位：

display: grid;

嗯
名字是看過啦。
但以前遇到排版問題，我的第一反應通常還是：

display: flex;

先 Flex 再說 XD
所以今天決定認真看看，

Flexbox 旁邊這位 Grid 到底是在忙什麼。

先來三個熟悉的方塊

又是你們。
html:

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

先給它們一點基本樣式：
css:

.box {
  padding: 30px;
  border: 2px solid black;
  text-align: center;
}

接著今天的主角登場：
css:

.container {
  display: grid;
}

然後……
嗯？

好像也沒怎樣？

三個方塊還是在那裡。

Grid：

你只叫我來，又沒跟我說要分幾格。

那就先切成三格看看

加入css：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

重新整理之後，

三個方塊直接排成三欄text ：

┌───────┬───────┬───────┐
│   1   │   2   │   3   │
└───────┴───────┴───────┘

欸？
你切版是不是有點快？？？

其中 css：

1fr

可以先簡單理解成：
一份空間。

所以 css：

1fr 1fr 1fr

就是把空間平均分成三份。
三個方塊各拿一份。
公平!

沒有人偷吃。

但是 1fr 打三次有點累

如果今天我要三欄 css：

grid-template-columns: 1fr 1fr 1fr;

還可以。

但如果哪天我要六欄 css：

grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;

……

我的手指沒有欠 CSS。
所以可以改成 css：

grid-template-columns: repeat(3, 1fr);

意思就是：
幫我重複 3 次 1fr。

所以 css：

repeat(3, 1fr)

其實就等於 css：

1fr 1fr 1fr

這樣舒服多了。

大家還是不要黏太近

然後又看到熟悉的 v：

gap: 20px;

完整一點就是 css：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

三個方塊就會自動留出間距。
text:

┌─────┐    ┌─────┐    ┌─────┐
│  1  │    │  2  │    │  3  │
└─────┘    └─────┘    └─────┘

欸！

gap 你怎麼又出現了？

前面 Flexbox 可以用，

Grid 也可以用。

看來你才是那個真正到處上班的人 XD

如果有六個方塊呢？

再多塞幾個 ：
html:

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
</div>

CSS 一樣：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

結果 Grid 就會自己排：
text:

┌─────┐  ┌─────┐  ┌─────┐
│  1  │  │  2  │  │  3  │
└─────┘  └─────┘  └─────┘

┌─────┐  ┌─────┐  ┌─────┐
│  4  │  │  5  │  │  6  │
└─────┘  └─────┘  └─────┘

看到這裡突然有點懂 Grid 的感覺了。

Flexbox 前幾天比較像是：

「你們幾個，排一排。」

Grid 則比較像：

「來，地板格子先畫好，一個一個站進去。」

今天先不要急著 Flexbox VS Grid

看到這裡其實已經會開始想：

所以這跟 Flexbox 到底差在哪？

先不要。

今天才剛認識 Grid，

不要第一次見面就逼人家跟 Flexbox 決鬥 XD

今天先記幾個最基本的就好 css：

display: grid;

開啟 Grid。

css:

grid-template-columns: repeat(3, 1fr);

切成三個平均欄位。

css:

gap: 20px;

幫每個格子留一點距離。
就先這樣。

今天算是正式跟 Grid 認識了。
至於它跟 Flexbox 到底誰比較適合什麼版面——
改天再把兩個抓出來正面對決 XD

Day 9，完成！