前端知库

subgrid 如何让嵌套组件对齐父网格?

参考答案

普通嵌套 Grid 拥有独立轨道,内部元素不会自动对齐外层轨道。将网格项本身设为网格容器,并在 grid-template-columns 或 grid-template-rows 上使用 subgrid,可以复用它所跨越的父网格轨道。

只指定列的 subgrid,不会自动让行也复用父网格。子网格的轨道数量与它跨越的父轨道有关;内部网格线编号从自身起点重新计算,不能直接照搬父网格的数字编号。父网格的命名线可以传入,间距也可以覆盖。

典型用途是让多个卡片的标题、正文和按钮跨组件对齐。它仍需明确外层放置规则和内容尺寸约束,不是对任意深度 DOM 自动统一排版。面向旧浏览器时,应准备普通网格等可接受的回退布局。