寒假生活指导 10

CSS Grid 的 subgrid 模式

在复杂网格布局中，嵌套网格的尺寸对齐一直是开发者痛点。CSS Grid 的 subgrid 属性打破了父网格与子容器的尺寸鸿沟，实现了真正的视觉关联布局。

核心机制
通过 display: grid 开启子网格后，设置 grid-template-rows: subgrid 或 grid-template-columns: subgrid，子网格将继承父级网格轨道的尺寸和间隙，同时保持自身内容的独立性。这种继承关系让嵌套元素能完美对齐父级网格线。

实战案例
构建等高的卡片列表（每行3列），要求：
卡片内标题/正文/页脚垂直对齐
所有卡片高度随内容自适应且保持统一
.card-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
align-items: start;
}

.card {
display: grid;
grid-template-rows: subgrid;
grid-row: span 3; /* 继承父级3行轨道 */
gap: 0.8rem;
}

传统方案对比
JavaScript动态计算高度：代码冗余且影响性能
Flexbox等高方案：无法处理多行文本溢出
常规Grid嵌套：需要手动同步轨道尺寸

独特优势
响应式穿透：父级修改网格结构时子元素自动同步
内容安全区：子元素溢出时不影响整体布局对齐
跨层级对齐：深层嵌套元素可直接对齐顶层网格线

渐进增强策略
.card {
display: grid;
grid-template-rows: auto 1fr auto; /* 基础布局 */
}

@supports (grid-template-rows: subgrid) {
.card {
grid-template-rows: subgrid;
grid-row: span 3;
}
}