无需登录 数据私有 本地保存

CSS Subgrid 布局构建器 - 对齐嵌套网格轨道

12
0
0
0

CSS Subgrid 布局构建器

可视化构建嵌套网格布局，让子元素精确对齐父级轨道 — 体验 grid-template-columns: subgrid 的强大能力

父网格设置
子网格容器位置
Subgrid 选项
显示选项
实时预览 列 Subgrid 已启用
生成的 CSS
常见问题 & 知识点
什么是 CSS Subgrid？
CSS Subgrid 是 CSS Grid Layout Level 2 引入的特性，允许嵌套网格（子网格）继承父网格的轨道定义。通过在子网格中设置 grid-template-columns: subgrid 或 grid-template-rows: subgrid，子网格的列/行轨道会与父网格对应轨道完全对齐，尺寸保持一致。这使得嵌套元素能够精确对齐到父级网格线上，解决了传统嵌套网格无法跨层级对齐的问题。
Subgrid 和普通嵌套 Grid 有什么区别？
普通嵌套 Grid 的子网格拥有独立的轨道系统，子元素只在子网格内部对齐，无法感知父网格的轨道线。而 Subgrid 让子网格的轨道成为父网格轨道的延伸，子元素可以直接与父网格的列/行对齐。关键区别：普通嵌套会产生独立的轨道尺寸计算；Subgrid 则完全继承父级轨道，保证跨层级的视觉一致性。
哪些浏览器支持 Subgrid？
Subgrid 已在主流现代浏览器中获得广泛支持：Firefox 71+（2019年率先支持）、Safari 16+（2022年）、Chrome 117+（2023年9月）、Edge 117+。截至2025年，全球浏览器覆盖率已超过 92%。对于不支持的环境，建议使用 @supports (grid-template-columns: subgrid) 进行特性检测并提供降级方案。
Subgrid 可以解决哪些实际布局问题？
Subgrid 特别适合以下场景：
• 卡片网格：让不同卡片内的标题、内容、按钮在全局网格上对齐
• 表单布局：嵌套字段组内的标签和输入框对齐全局列线
• 仪表盘面板：面板内的图表和数据块跨面板对齐
• 多级导航：子菜单项与父菜单的列宽保持一致
• 时间轴：嵌套事件与全局时间轨道精确对齐
grid-template-columns: subgrid 如何影响 Gap？
当子网格使用 subgrid 时，gap 默认也会从父网格继承。如果父网格设置了 gap: 16px，子网格的列/行间隙会自动与父网格一致。你也可以在子网格上显式设置不同的 gap 值来覆盖继承。需要注意的是，子网格的 gap 只影响子网格内部元素之间的间距，而子网格与父网格其他元素之间的间距仍由父网格的 gap 控制。
如何在不支持 Subgrid 的浏览器中做降级处理？
使用 CSS 特性查询实现渐进增强：
@supports (grid-template-columns: subgrid) { ... }
在支持的环境中启用 subgrid 的精确对齐；在不支持的环境中，可以为子网格设置近似的独立列模板（如 1fr 1fr）作为降级方案。也可以使用 JavaScript 动态计算父网格轨道尺寸并应用到子网格上，但实现复杂。推荐优先使用特性查询配合合理的 fallback 样式。
🔧 相关工具