靜態行銷頁與文件入口仍大量採三欄價格卡、功能對照表與側欄目錄；當文案長度不同，設計師最在意的是標題、價格與行動按鈕是否在同一水平線上對齊。在 CSS 子網格（subgrid） 普及前，團隊常以 flex 包一層、複製 min-height 權杖，或寫 JavaScript 反覆量測。子網格讓內層網格直接參與父層的列與欄軌，於是把「等高」寫進樣式表而非一次性魔術數字。本文面向一次編譯輸出 HTML/CSS 的多頁應用與靜態站產線，並假設你仍須在真實 Safari/WebKit 上簽核。與元件級寬度策略並行時，請搭配閱讀 容器查詢與靜態版面；若要避免行銷覆寫與基底網格互相覆蓋，請一併檢視 階層式靜態樣式與 Safari 的分層約定。
為何靜態行銷需要子網格
價格表是最典型的例子：外層區塊以十二欄網格切分，每一階層各自是一個 grid 項目，內含標題、金額、條列說明與按鈕。沒有子網格時，內層清單無法繼承父層的行節奏，設計師只能鎖死文案長度或接受按鈕高低不一。子網格把父層軌線暴露給後代，讓編譯後的 CSS 承載對齊條件，而不是每個語系各調一次 padding。文件站中「側欄＋本文＋本頁目錄」亦常需要跨欄基線一致；子網格減少僅為模擬欄位而存在的包裝 div，對螢幕閱讀器通常也有幫助，因為較少無語義節點插在標題與段落之間。
2026 年初公開設計系統展示流量仍顯示約 4–7% 工作階段落在不支援子網格的瀏覽器組合上——足夠小可做漸進增強，卻不能假設所有人都能走子網格關鍵路徑。請把降級當作合約條款的一部分，而不是上線前一晚的補丁。
跨國團隊在導入子網格時，常低估「同一套軌線」對在地化文案的影響：德文單字較長、日文直排與換行規則不同，行高仍由父層統一時，反而更容易暴露排版假設是否一致。建議在設計稿標註命名軌線，與 CSS 的 [line-name] 一對一對應，季度改版時只調外層 repeat() 模式即可。
效能方面，子網格不會神奇減少網格項目數量，而是改變軌尺寸如何向下傳遞；若頁面底部有上百張重複卡片，仍應評估 content-visibility 或延後載入，而不是只靠子網格解決捲動卡頓。營運與資安審查偶爾會問「複雜網格是否擴大 DOM 注入風險」——子網格本身不執行指令碼，但請勿把未跳脫的使用者 HTML 直接插入網格區域；清理政策與以往相同。
欄、列與 subgrid 語法
在子網格容器上維持 display: grid，並在對應軸使用 grid-template-columns: subgrid 與／或 grid-template-rows: subgrid。子元素必須正確落在父層的 grid 區域，否則軌線繼承沒有對齊對象。行銷常插入限時緞帶時，請用命名線條預留額外列，避免每次改版重新編號所有模板。
.pricing {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 24px;
}
.tier {
grid-column: span 4;
display: grid;
grid-template-rows: subgrid;
grid-row: span 4;
}
.tier > * { min-width: 0; }靜態產生器應把此結構集中在一個版型局部，避免數十頁複製類名略有差異的子網格宣告；若採分層 CSS，可把共用規則收斂到名為 components 的層。搭配邏輯屬性（margin-inline、padding-block）可讓 RTL 語系沿用同一套對齊邏輯。
與設計協作時，請在交接文件寫明「裝飾性動效」與「資訊性排版」的邊界；當行銷要求捲動連動效果時，子網格調整可能與 prefers-reduced-motion 政策衝突，需提前排程複測。
2026 年瀏覽器矩陣
| 排版引擎 | 子網格 | 靜態質檢重點 |
|---|---|---|
| Chromium 79+ | 支援 | 開發者工具網格疊加層可顯示繼承軌。 |
| Firefox 71+ | 支援 | 軸不一致時警告訊息較明確。 |
| 近期 Safari | 支援 | 小版號仍建議重測；STP 與穩定版在小數軌寬上可能不同。 |
| 舊版 WebKit | 無 | 提供單欄堆疊或 flex 降級。 |
當法務詢問「純 CSS 版面」是否排除特定內嵌瀏覽器使用者時，可用此表說明 kiosk 或舊裝置仍需要線性閱讀後備方案。
Safari 與雲端 Mac mini
Linux CI 無法完整驗證 SF Pro 在分數行高下與動態字級一起變動時的表現。建議每週安排 30–45 分鐘：穩定版 Safari 做合約簽核，Safari Technology Preview 用來二分 WebKit 專屬缺陷。開啟 Web Inspector 網格疊加層拍全頁截圖，讓設計師看見軌線位移。
若採購無法新增筆電，可短期租用 Apple Silicon Mac mini：以 SSH 部署、以 VNC 互動驗 Safari，測試前快照磁碟。短租均價約 $16.9/天，通常低於寄送借測機一週的價格頁改版成本。預覽主機請鏡像正式環境的 Content-Security-Policy 與字型 URL；網路字型不一致時，子網格列高看起來「錯了」即使 CSS 相同。
無障礙團隊請在子網格重構後以 VoiceOver 走查：較少包裝 div 多半有利，但若行跨度在行動版改寫，朗讀順序可能改變。請在 1280 與 390 寬度各錄一段兩分鐘螢幕操作，附在合併請求供分散式團隊對齊期待。
降級與列印
以 @supports (grid-template-columns: subgrid) 包住子網格規則，舊引擎改走單欄 flex。列印樣式請把多欄網格收成單欄並移除高耗墨背景；子網格不改變分頁規則本身。
測試清單建議包含：德文長字串價格卡、200% 縮放時按鈕對齊、以及全域 gap 權杖變更後的視覺差異比對。雲端主機在釋出前可關閉過度激進、會吃掉網格註解空白的最小化流程，以利除錯軌線邊界。
常見問題
CSS 子網格會取代容器查詢嗎？
不會。容器查詢處理元件級響應；子網格對齊巢狀軌與父層網格。可視需求並用。
2026 年在 Safari 使用子網格安全嗎？
在受支援的 macOS 上可以，但仍應逐版驗證並保留 STP 做預檢。
沒有 Mac 要怎麼測子網格？
以 WebKit 自動化做冒烟，並排程真機或雲端 Mac mini 做像素級簽核。
Mac mini 仍是 WebKit 網格工作的參考平台：字型彩現、原生捲動與長時測試的熱管理都較可預測。MacHTML 提供可 SSH/VNC 的 Apple Silicon 實機租用，讓靜態站團隊在子網格與容器查詢並存時不必新增資本支出——按衝刺開機、驗畢即關。