UD5工具箱
第一步：理解 Subgrid 基本概念
在开始操作之前，建议先了解 Subgrid 的核心原理。Subgrid 是 CSS Grid Level 2 引入的特性，它允许子网格（子元素的 grid 布局）直接继承父网格的轨道定义，而不是独立定义自己的行列大小。这意味着子网格中的项目可以与父网格中的其他元素保持完美对齐。简单来说，父网格定义了“骨架”，子网格复用这套骨架来排列自己的内容。
第二步：配置父网格参数
在工具面板的“父网格设置”区域，首先设置网格的列数和行数。列数决定了父网格在水平方向上被分成多少个轨道，行数决定了垂直方向的轨道数量。接着调整列间距（column-gap）和行间距（row-gap），这两个参数控制相邻轨道之间的空隙大小。建议从默认值开始，逐步微调，观察预览区域中网格线和轨道的变化。当您设置好父网格后，预览区域会立即显示出对应的网格布局效果。
第三步：创建子网格
在“子网格设置”区域，配置子网格在父网格中的位置和尺寸。起始列指定子网格从父网格的第几列开始，起始行指定从第几行开始。列跨度和行跨度分别定义子网格在水平和垂直方向上占据多少个轨道。设置完成后，在预览区域中可以看到一个带有不同颜色标识的子网格区域，它清晰地展示了子网格与父网格轨道的对应关系。
第四步：启用 Subgrid 继承
这是最关键的一步。勾选“列 Subgrid”复选框，子网格将在列方向上继承父网格的轨道定义；勾选“行 Subgrid”复选框，子网格将在行方向上继承。您可以选择仅在一个方向上使用 Subgrid，也可以同时在两个方向上启用。启用后，预览区域会立即更新，展示子网格如何完美对齐到父网格的轨道线上。尝试取消勾选再重新勾选，观察子网格行为的差异，这将帮助您深入理解 Subgrid 的继承机制。
第五步：调整子网格内部项目
通过“子网格内部项目数”参数，设置子网格中包含多少个子项。增加项目数量可以让您观察到当内容超出子网格容量时的布局表现，减少项目数量则可以查看内容较少时的对齐效果。建议尝试不同的项目数量组合，特别是在同时启用了列 Subgrid 和行 Subgrid 的情况下，观察子项如何在继承的轨道中自动分布。
第六步：使用快速预设进行实践
点击工具面板上的预设按钮，可以快速加载四种典型布局场景。“卡片对齐”预设展示了如何利用 Subgrid 让多张卡片的标题、内容和按钮保持纵向对齐。“表单布局”预设演示了表单标签和输入框在 Subgrid 辅助下的精确对齐。“杂志排版”预设呈现了复杂多栏内容的排版效果。“全宽横幅”预设则展示了跨越整个网格宽度的布局技巧。每个预设都是一个完整的学习案例，建议逐一尝试并分析参数配置。
第七步：生成并导出 CSS 代码
当布局效果达到预期后，点击“生成 CSS 代码”按钮，工具会自动生成包含父网格和子网格完整样式的 CSS 代码片段。代码中包含了所有必要的属性声明，格式规范且易于阅读。点击复制按钮将代码保存到剪贴板，然后粘贴到您的项目样式文件中即可使用。建议在实际项目中添加必要的浏览器兼容性前缀，并根据具体场景微调参数值。