> 我先問一個問題，如果我有一個 3x3 的 Excel 方塊，請問我有幾條格線？
Grid 容器中的格線是整個排版定位中的靈魂，但，他沒有 Excel 那麼單純。
--------------------------------------------------------------------------------
網格格線
Grid 容器的靈魂就是網格格線，我們在宣告一個 Grid 容器的時候，每個方塊就會產生相對應的格線，而這些格線當中還會有先前提及的隱性格線（implicit
grid）的設計。
我們從 Grid 容器先看起，首先我們定義一個 3x3 的 Grid 容器，
我們繼續來深入關於 Grid 容器的相關樣式設定。雖然目前 CSS 框架在多數情況下並不需要特別在意，但，就老話一句，誰在意誰痛苦。
> 踩到雷而且你還不知道為什麼
--------------------------------------------------------------------------------
新的單位 fr
從 Grid 出現之後，我們有一個新的尺寸單位可以使用，他叫做彈性長度（flexible length），在 CSS 當中，因應這個彈性長度，所以就有了新單位
fr，而 fr 的全名為 彈性軌道（flexible tracks），或者你會聽到有人稱他為
> 你如果會用 Excel，那 Grid 就應該不陌生。
不過老實講，我也不太會用 Excel。
Grid Layout Module
其實他已經 CR 好一陣子了，目前多數主流的 CSS 框架已經開始採用。所以並不是你不會用或是沒有使用到這個東西，而是你已經在用了，但是你不知道他背後是使用
Grid Layout 而已。
caniuse grid layout Level 1Grid 的基本結構就跟我剛剛提到的 Excel
很像，他是一個矩形區塊，包含了欄與列的設定。
> 數學不會背叛你，數學不會就是不會。
我現在寫三角函數都是去 Google
的，不要問。注意！本篇可能會出現大量的加減乘除，如有出現頭暈目眩、噁心想吐、手腳冰冷無力等狀況，請立即關閉本篇文章，閃光洽關心您的身體健康。
或者你要去驗孕也是可以的。
--------------------------------------------------------------------------------
容器計算
前幾篇有提到剩餘空間、元件填充等等，我們現在就來看一下實際上 Flex 容器是怎麼做運算的。首先是 flex-grow 的計算方式，在數值總和大於 1
的一般情況下來看，但且記得，必須容器上有存在 剩餘空間 的情況下才能被分配。
Flex 有存在剩餘空間時才能以
> Media Query 已經快被講爛了。
我不確定現在是否還流行 RWD 這件事情，如果以 Core Web Vitals [https://web.dev/vitals/]
來看，你可能會被建議減少未使用的 CSS，但是誰在乎誰痛苦。
我最近就挺痛苦的（倒）。
--------------------------------------------------------------------------------
Flexbox 與 Media Query
前面講到了不少關於斷行、多行的問題，當我們準備面臨多裝置、多解析度的時候，這個問題又會浮上台面。畢竟以常用的 flex-direction: row
![[CSS] Flex/Grid Layout Modules, part 8](/content/images/size/w960/2021/09/grid-sample-16-1.png)
![[CSS] Flex/Grid Layout Modules, part 7](/content/images/size/w960/2021/09/grid-sample-6-1.png)
![[CSS] Flex/Grid Layout Modules, part 6](/content/images/size/w960/2021/09/grid-caniuse-1.png)
![[CSS] Flex/Grid Layout Modules, part 5](/content/images/size/w960/2021/09/flex-sample-34.png)
![[CSS] Flex/Grid Layout Modules, part 4](/content/images/size/w960/2021/09/flex-sample-29.png)