Grid 與 subgrid

subgrid 是一種很奇妙的跨維度設定,在 w3c 當中有詳細解釋。我這邊稍微提一下他到底是什麼樣的概念。

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

其實很難理解,不過沒關係,目前可以被使用的好像只有 Firefox 可以比較完整的呈現 subgrid 的效果。或者,可以看一下我之前的 文章

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


所以說那個手機版

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