UD5工具箱
什么是 CSS Subgrid？它与普通 CSS Grid 有什么区别？
CSS Subgrid 是 CSS Grid Level 2 规范中引入的特性，它允许一个网格项目（自身也是网格容器）继承其父网格的轨道定义。与普通 CSS Grid 的核心区别在于：普通嵌套网格独立定义自己的行列大小，子网格中的元素只能在内部对齐；而使用 Subgrid 后，子网格的轨道直接引用父网格的轨道，子网格中的元素可以与父网格中的其他元素实现跨层级的完美对齐。例如，当父网格定义了三列且每列宽度为 1fr 时，使用列 Subgrid 的子网格也会被分为三等份，其中的内容可以与父网格其他行的同列内容精确对齐。
为什么在某些浏览器中 Subgrid 不生效？
Subgrid 的浏览器支持情况取决于浏览器版本。Chrome 需要 117 及以上版本，Firefox 从 71 版本开始支持，Safari 需要 16 及以上版本。如果您使用的是较旧版本的浏览器，Subgrid 相关的 CSS 属性将被忽略，导致布局回退到普通嵌套网格的行为。建议在使用 Subgrid 前，通过 caniuse.com 确认目标用户群体的浏览器分布情况，并为不支持的浏览器准备合理的降级方案。本工具生成的代码中建议添加 @supports 查询来实现渐进增强。
Subgrid 只能在列方向使用吗？行方向可以单独使用吗？
Subgrid 支持在列方向和行方向上独立使用，也可以同时在两个方向上启用。当您在本工具中勾选“列 Subgrid”时，子网格的 grid-template-columns 属性将被设置为 subgrid，仅在列方向继承父网格轨道；勾选“行 Subgrid”时，grid-template-rows 属性被设置为 subgrid，仅在行方向继承。两个开关互不影响，您可以根据实际布局需求灵活组合。例如，表单布局中通常只需要列方向的对齐，可以仅启用列 Subgrid；而卡片网格中可能需要行列两个方向的对齐，则同时启用两者。
gap 间距在 Subgrid 中是如何工作的？子网格需要单独设置 gap 吗？
gap 间距在 Subgrid 中采用继承机制。当子网格使用 subgrid 关键字时，它会自动继承父网格设置的 row-gap 和 column-gap 值，子网格不需要（也不应该）单独声明 gap 属性。这意味着父网格中的间距设置会无缝传递到子网格层级，确保整体布局的间距节奏保持一致。在本工具中，您只需在父网格设置区域调整列间距和行间距，子网格会自动应用相同的间距值。这种继承机制简化了代码维护，修改父网格间距后所有子网格会同步更新。
使用 Subgrid 时，子网格的轨道大小由谁决定？
当子网格启用 Subgrid 继承后，其轨道大小完全由父网格的轨道定义决定，子网格自身不需要（也无法）指定轨道大小。具体来说，如果父网格定义了三列且大小分别为 200px、1fr、200px，那么启用了列 Subgrid 的子网格也会被分为三列，大小同样为 200px、1fr、200px。子网格只能通过 grid-column 和 grid-row 属性来指定自己在父网格中的起始位置和跨越的轨道数量，但不能重新定义轨道的大小。这是 Subgrid 与普通 Grid 最根本的区别之一。
在实际项目中，哪些场景最适合使用 Subgrid？
Subgrid 最适合需要跨层级对齐的布局场景。第一是卡片网格布局：当多张卡片的内容高度不一致时，使用 Subgrid 可以确保所有卡片的标题、描述和按钮在垂直方向上精确对齐。第二是表单布局：标签、输入框和验证信息可以与页面其他部分的网格对齐。第三是杂志式多栏排版：不同栏中的标题和段落保持水平对齐。第四是定价表格：不同套餐的特性列表保持行对齐。第五是全宽横幅与内容区域的协调布局。这些场景的共同特点是需要多个层级的内容共享同一套网格轨道，Subgrid 正是为此而生的解决方案。
本工具生成的 CSS 代码可以直接用于生产环境吗？
本工具生成的 CSS 代码在语法和结构上是完全正确的，可以直接作为基础代码使用。但在投入生产环境前，建议进行以下检查和调整：首先，确认目标浏览器的 Subgrid 支持情况，必要时添加 @supports 查询作为降级方案；其次，根据项目实际需求微调轨道大小和间距数值；第三，检查生成的代码是否与项目现有的 CSS 架构（如 BEM 命名规范、CSS 变量体系）保持一致；最后，进行跨浏览器和跨设备的兼容性测试。工具生成的代码是高质量的起点，但生产环境的代码还需要根据具体项目进行定制化调整。
Subgrid 和 container query（容器查询）可以同时使用吗？
是的，Subgrid 和容器查询可以同时使用，两者并不冲突。容器查询用于根据父容器的尺寸条件来调整子元素的样式，而 Subgrid 用于让子网格继承父网格的轨道定义。在实际项目中，您可以先通过 Subgrid 建立对齐关系，再通过容器查询为不同尺寸的容器定义不同的布局策略。例如，一个卡片组件在宽容器中使用三列 Subgrid，在窄容器中通过容器查询切换为单列布局。需要注意的是，容器查询本身也需要较新的浏览器支持，与 Subgrid 结合使用时需要同时关注两者的兼容性覆盖范围。
为什么我的子网格与父网格没有对齐？常见原因有哪些？
子网格与父网格未对齐通常有以下几个原因：第一，忘记在子网格的 grid-template-columns 或 grid-template-rows 属性中使用 subgrid 关键字。第二，子网格的 grid-column 或 grid-row 起始位置设置不正确，导致子网格没有覆盖到预期的轨道范围。第三，子网格跨越的轨道数量与内部项目的预期分布不匹配。第四，父网格的 gap 间距与子网格的间距设置冲突（子网格不应单独设置 gap）。第五，子网格内部项目使用了 margin 或 padding 导致视觉偏移。建议使用本工具的实时预览功能，逐项检查参数设置，定位未对齐的具体原因。
使用 Subgrid 会对页面性能产生影响吗？
从渲染性能角度来看，Subgrid 本身不会引入显著的性能开销。Subgrid 的计算由浏览器的布局引擎（Layout Engine）原生处理，与普通 Grid 的渲染路径类似，不会触发额外的重排或重绘。真正影响性能的是网格结构的复杂程度——大量的网格轨道、频繁的 DOM 更新、以及复杂的嵌套层级会增加布局计算的时间。在实际项目中，建议避免创建过于复杂的网格结构（例如超过 20 行 20 列的网格），并合理使用 CSS containment 属性来隔离布局影响范围。本工具的预览功能可以帮助您在开发阶段就评估布局的复杂度，确保最终方案在性能和效果之间取得平衡。