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

CSS Subgrid 布局生成器 - 可视化创建子网格

CSS 开发工具 CSS Subgrid 布局 生成器
8
0
0
0

CSS Subgrid 布局生成器

CSS Grid Level 2

可视化创建和预览 CSS Subgrid 布局，实时生成代码

快速预设：
父网格设置
26
24
px
px
子网格设置
18
提示：子网格内部项目将与父网格的轨道完美对齐。观察预览中子项边缘与父网格其他单元格边缘的关系。
浏览器支持：Chrome 117+, Firefox 71+, Safari 16+, Edge 117+
实时预览
父网格 4×2 | 子网格跨2列2行
生成的 CSS 代码
CSS Subgrid 常见问题
什么是 CSS Subgrid？它解决了什么问题？
CSS Subgrid 是 CSS Grid Layout Level 2 规范中引入的特性。它允许子网格项继承父网格的轨道定义（列和/或行）。这意味着嵌套网格中的元素可以与外层父网格的轨道完美对齐。

主要解决的问题：在嵌套网格中，子网格内部的元素无法与祖父网格的轨道对齐。例如，一组卡片中，卡片内部的标题、正文、按钮等元素，使用 Subgrid 后可以在不同卡片之间保持对齐。
Subgrid 和普通嵌套 Grid 有什么区别？
普通嵌套 Grid：子网格独立定义自己的列/行轨道，与父网格完全无关。即使数值相同，由于各自的上下文不同，轨道大小可能不一致。

Subgrid：子网格的轨道直接继承父网格，轨道大小、间距完全一致。子网格内部的元素与父网格中对应列/行的元素在边缘上完美对齐。使用 grid-template-columns: subgrid 和 grid-template-rows: subgrid 来启用。
哪些浏览器支持 Subgrid？生产环境可以使用吗？
截至2024年，所有主流浏览器都已支持 Subgrid：Chrome 117+（2023年9月）、Firefox 71+（2019年12月，是最早支持的）、Safari 16+（2022年9月）、Edge 117+。

全球浏览器支持率已超过 92%，对于大多数项目可以在生产环境使用。建议为不支持的浏览器提供 fallback（使用普通 Grid 嵌套）。
可以只对列或只对行使用 Subgrid 吗？
完全可以！Subgrid 支持部分继承：
• grid-template-columns: subgrid — 只继承列轨道，行可以自定义
• grid-template-rows: subgrid — 只继承行轨道，列可以自定义
• 两者同时使用 — 完全继承父网格的列和行轨道

这种灵活性让 Subgrid 可以适应各种布局需求。
Subgrid 的 gap 间距如何工作？
当子网格使用 Subgrid 时，它会继承父网格的 gap 值。如果子网格也显式设置了 gap，子网格的 gap 会覆盖继承值。

关键行为：子网格内部的元素之间的间距与父网格其他元素之间的间距保持一致，这确保了整体布局的视觉统一性。这是 Subgrid 最强大的特性之一。
🔧 相关工具