CSS subgrid 子网格生成器
可视化生成 CSS subgrid 子网格（Chrome 117+、Firefox 71+、Safari 16+ 原生支持）：
完整支持 grid-template-columns: subgrid 与 grid-template-rows: subgrid 双向轨道继承、none / columns / rows /
both 四种方向切换、子网格跨列跨行定位（grid-column /
grid-row span）、父网格列行轨道定义（fr / px /
% / auto）、gap 自动继承。内置父子双层可视化预览——
蓝色虚线父网格轨道 + 橙色实线子网格，直观展示子网格如何继承并对齐父网格轨道。
8 组预设覆盖双向继承、仅列/仅行继承、无继承对比、卡片墙列对齐、表单标签对齐、杂志嵌套布局等场景。
适用于卡片墙列对齐、表单标签输入对齐、杂志式嵌套排版等需要嵌套网格轨道对齐的场景。所有处理在浏览器本地完成。
可视化预览
蓝色虚线 = 父网格轨道 | 橙色实线 = 子网格 | 子网格内项自动对齐父网格轨道原理说明
生成的 CSS 代码
.parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 140px;
gap: 16px 16px;
}
.child {
display: grid;
grid-column: span 3;
grid-template-columns: subgrid;
grid-template-rows: subgrid;
/* subgrid 方向下 gap 自动继承父网格 */
}常见问题
什么是 CSS subgrid？它解决了什么问题？
CSS subgrid 是 CSS Grid Layout Module Level 2 引入的子网格特性，
允许嵌套的 grid 容器继承父网格的轨道定义——通过将子网格的
grid-template-columns 或 grid-template-rows 设为
subgrid，子网格直接复用父网格对应方向的轨道，实现嵌套元素的轨道级对齐。
它解决的核心痛点是：嵌套网格无法对齐父网格轨道。传统嵌套 grid
的子网格独立定义轨道，父子网格的列线/行线无法对齐，导致嵌套元素错位。开发者只能用百分比硬凑对齐
（脆弱，父网格轨道变化即失效）或放弃嵌套用扁平结构（语义丢失）。subgrid 让嵌套结构保持语义的同时
实现轨道级精确对齐。
典型场景：卡片墙中每张卡片内部的列与父网格列对齐、表单中标签与输入框跨字段对齐、
杂志式排版中文章内容列与版面列对齐。
subgrid 与普通嵌套 grid 有什么区别？
普通嵌套 grid：子网格独立定义自己的 grid-template-columns，
与父网格轨道无关联。例如父网格 1fr 2fr 1fr，子网格 1fr 1fr，
子网格的列线与父网格列线完全错位。
subgrid 嵌套：子网格的 grid-template-columns: subgrid，
直接继承父网格的列轨道定义。子网格的列线与父网格列线完全对齐，父网格轨道变化时子网格自动跟随。
关键差异：普通嵌套是"两层独立网格"，subgrid 是"一层网格的延伸"。
subgrid 下子网格的 gap 也继承父网格，无需重复声明。本工具的"无继承（对比基线）"预设可直观对比
两者差异——切换到 columns/rows/both 即可观察 subgrid 的对齐效果。
grid-template-columns: subgrid 和 grid-template-rows: subgrid 怎么用？
两者分别让子网格继承父网格的列轨道与行轨道，可单独使用或组合使用。
仅列继承：grid-template-columns: subgrid;，子网格列对齐父网格列，
行轨道独立定义。适合卡片墙、表单标签对齐等只需列对齐的场景。
仅行继承：grid-template-rows: subgrid;，子网格行对齐父网格行，
列轨道独立定义。适合需要行对齐的场景。
双向继承：同时声明两者，子网格列与行都对齐父网格。适合需要完整对齐的场景。
继承的轨道数：子网格继承的轨道数取决于它在父网格中跨越的轨道数。例如子网格
grid-column: span 3 且父网格有 3 列，则子网格继承 3 条列轨道。本工具的方向切换按钮
可实时切换四种方向（none/columns/rows/both）观察效果。
subgrid 方向（columns / rows / both）如何选择？
选型原则：看需要对齐哪个方向的轨道。
- columns：只需列对齐。典型场景：卡片墙（卡片内列对齐父网格列）、
表单（标签列与输入框列对齐）、杂志排版（文章列对齐版面列）。
- rows：只需行对齐。典型场景：需要子网格行与父网格行对齐的布局，
如时间轴、日程表。
- both：需要双向对齐。典型场景：仪表盘卡片（行列都需要对齐）、
复杂嵌套表格布局。
- none：不需要对齐，作为对比基线。
实践建议：优先用 columns（覆盖 80% 场景），只有确实需要行对齐时才升级为
both。subgrid 方向越多，约束越强，灵活性越低。本工具默认采用 both 方向展示
完整对齐效果，可按需切换。
subgrid 方向下 gap 如何继承？需要重复声明吗？
不需要重复声明。subgrid 方向下，子网格的 gap（row-gap
与 column-gap）自动继承父网格的 gap 值。这是 subgrid 的核心便利之一——
父子网格间距保持一致，无需手动同步。
例如父网格 gap: 16px，子网格 grid-template-columns: subgrid，
子网格的列间距自动为 16px，与父网格列间距一致。
注意：只有 subgrid 方向的 gap 会继承。若子网格只 columns: subgrid
而 rows 独立定义，则 row-gap 可独立设置，column-gap 继承父网格。
本工具在 subgrid 方向下自动注释"gap 继承父网格"，在 none 方向下允许独立配置 gap。
子网格如何跨列跨行？grid-column / grid-row span 怎么配合 subgrid？
子网格通过 grid-column: span N 与 grid-row: span N 在父网格中定位，
决定它继承多少条父网格轨道。
例如父网格 4 列，子网格 grid-column: span 2 且
grid-template-columns: subgrid，则子网格继承 2 条父网格列轨道。
关键规则：子网格继承的轨道数 = 跨越的父网格轨道数。若子网格跨 3 列且
columns: subgrid，则子网格有 3 条列轨道，与父网格对应 3 列完全对齐。
实践建议：跨列数应与子网格内项的预期列数匹配。例如子网格跨 3 列且希望 6 个项
排成 2 行 3 列，则 colSpan: 3 + columns: subgrid 即可。本工具的跨列跨行
输入框可实时调整继承的轨道数。
subgrid 的浏览器兼容性如何？如何渐进降级？
subgrid 已全主流浏览器支持：Chrome 117+（2023 年 9 月）、Firefox 71+（2019 年）、
Safari 16+（2022 年）。截至 2024 年底全球浏览器支持率已超 95%，可放心用于生产环境。
渐进降级策略：不支持的浏览器会忽略 subgrid 值，子网格退化为
独立网格（无轨道继承）。推荐写法：
grid-template-columns: 1fr 1fr 1fr; /* 降级 */ grid-template-columns: subgrid; /* 增强 */
先写降级值，再用 subgrid 覆盖。支持的浏览器用 subgrid 对齐，不支持的用独立网格，
两者都能正常渲染，只是对齐精度不同。这是天然的渐进增强——零额外开销，新旧浏览器体验都不差。
使用本工具会保存我的数据吗？隐私如何保障？
零数据上传，全本地处理。本工具的所有配置（父网格轨道、子网格方向、跨列跨行、
gap 等）仅在浏览器内存中处理，不发起任何网络请求，不写入本地存储，不收集任何用户数据。
关闭页面后所有配置自动清除。
复制代码功能使用浏览器原生 Clipboard API，内容直接写入系统剪贴板，
不经过任何中间服务。
本站定位为"零广告 · 全本地处理"的中文开发者工具集，隐私保障是核心承诺。