UD5工具箱
父网格可视化配置
通过直观的滑块和输入框，自由设置父网格的列数、行数、列间距（column-gap）和行间距（row-gap）。每项参数的调整都会在预览区域即时反映，让开发者清晰观察到网格轨道的变化效果。支持从 1 到 12 的列数范围和 1 到 10 的行数范围，覆盖绝大多数实际布局需求。
子网格精细控制
提供起始列、起始行、列跨度、行跨度四项核心参数的独立调节。开发者可以精确定义子网格在父网格中的位置和大小，实时观察子网格与父网格轨道的对齐关系。每个参数的修改都会触发预览刷新，确保布局调整的可控性和可预测性。
列/行 Subgrid 独立开关
支持分别启用列方向（grid-template-columns: subgrid）和行方向（grid-template-rows: subgrid）的 Subgrid 继承。开发者可以灵活选择仅在列方向继承父网格轨道、仅在行方向继承，或同时在两个方向继承，精准匹配不同的布局策略需求。
子网格内部项目管理
支持自定义子网格内部的项目数量，直观展示每个子项在 Subgrid 轨道中的分布情况。通过增减项目数量，可以快速验证不同内容量下的布局表现，确保设计方案在各种内容场景下都能保持良好的对齐效果。
四大快速预设模板
内置卡片对齐、表单布局、杂志排版、全宽横幅四个高频场景预设。点击即可一键加载对应的参数组合，快速进入特定布局的设计状态。预设模板经过精心调优，参数设置合理，既可作为学习参考，也可直接应用于实际项目。
实时双层预览
预览区域同时展示父网格和子网格的布局效果，用不同颜色区分网格边界和轨道。开发者可以清晰观察到子网格如何从父网格继承轨道定义，以及内部项目如何与父网格对齐。这种双层可视化极大降低了理解 Subgrid 行为的认知负担。
一键 CSS 代码生成
根据当前所有参数设置，自动生成完整的 CSS 代码片段，包含父网格和子网格的样式定义。代码格式规范、注释清晰，支持一键复制到剪贴板。生成的代码可直接粘贴到项目中使用，无需手动调整格式或补充遗漏的属性。
集成 FAQ 知识库
工具内置丰富的常见问题解答，涵盖 Subgrid 基础概念、浏览器兼容性、与普通 Grid 的对比、gap 间距继承机制等核心知识点。用户在使用过程中遇到疑问时，无需离开工具即可获取专业的技术解答，实现学习与实践的无缝融合。