> ## Content Index
> Fetch the complete content index at: https://blog.hinablue.me/llms.txt
> Use this file to discover other available public pages before exploring further.

# [12th 鐵人賽] 還在吵架的 subgrid, Day 29
- URL: https://blog.hinablue.me/12th-ithome-ironman-day-29/
- Published: 2020-10-13T11:11:25.000Z
- Updated: 2026-07-06T18:37:53.000Z
- Author: Hina Chen
- Tags: CSS, ITHome, 鐵人賽, 2020, CSS3, CSS Media Query Level 4, Media Query, Grid Layout, Grid System

## Grid 與 subgrid

`subgrid` 是一種很奇妙的跨維度設定，在 [w3c](https://www.w3.org/TR/css-grid-2/?ref=blog.hinablue.me#subgrids) 當中有詳細解釋。我這邊稍微提一下他到底是什麼樣的概念。

- 遵從父層格線系統，跳出現有維度形成單一欄（或行）的區塊。
- 子格線系統跟父層格線系統共享格線設定。
- 子格線系統格線總量與他所跨維度的父層格線軌跡相同。
- 若子網格系統跨維度軌跡固定，則取父層格線軌跡的跨度起始值。
- 若子網格系統跨維度不固定，則取父層格線軌跡跨度起算為 `1`。
- 子網格系統起算的 `<數字> - <位置>` 是獨立在自己的網格系統內。
- 子網格若是被填充在父層格線系統之前，那麼子網格軌跡會使用父層格線系統的格線命名，但這些名稱必須要是子網格系統以外的名字。
- 子網格系統的命名若跟父層格線系統重疊，則會被分配到父層格線系統的命名區域內。

其實很難理解，不過沒關係，目前可以被使用的好像只有 Firefox 可以比較完整的呈現 `subgrid` 的效果。或者，可以看一下我之前的 [文章](https://blog.hinablue.me/css-grid-layout/)。

不過因為還在吵架當中，所以先觀察看看就好了。

---

## 所以說那個手機版

其實 `subgrid` 很難理解，就算是有大量的例子也是超難。或許我再改天找一個時間寫完整的測試文章好了。