Grid 與 subgrid
subgrid
是一種很奇妙的跨維度設定,在 w3c 當中有詳細解釋。我這邊稍微提一下他到底是什麼樣的概念。
- 遵從父層格線系統,跳出現有維度形成單一欄(或行)的區塊。
- 子格線系統跟父層格線系統共享格線設定。
- 子格線系統格線總量與他所跨維度的父層格線軌跡相同。
- 若子網格系統跨維度軌跡固定,則取父層格線軌跡的跨度起始值。
- 若子網格系統跨維度不固定,則取父層格線軌跡跨度起算為
1
。 - 子網格系統起算的
<數字> - <位置>
是獨立在自己的網格系統內。 - 子網格若是被填充在父層格線系統之前,那麼子網格軌跡會使用父層格線系統的格線命名,但這些名稱必須要是子網格系統以外的名字。
- 子網格系統的命名若跟父層格線系統重疊,則會被分配到父層格線系統的命名區域內。
其實很難理解,不過沒關係,目前可以被使用的好像只有 Firefox 可以比較完整的呈現 subgrid
的效果。或者,可以看一下我之前的 文章。
不過因為還在吵架當中,所以先觀察看看就好了。
所以說那個手機版
其實 subgrid
很難理解,就算是有大量的例子也是超難。或許我再改天找一個時間寫完整的測試文章好了。