UD5工具箱
核心功能
本工具提供全面的 Subgrid 布局构建能力，帮助您轻松创建复杂的嵌套网格布局。
父网格参数设置
设置父网格的列数、行数和间距（gap）参数。支持固定像素值、百分比和 fr 弹性比例单位的轨道大小定义方式。父网格的轨道定义将被子网格直接继承，实现跨层级的精确对齐效果。
子网格定位配置
配置子网格容器在父网格中的精确位置，包括起始列、起始行、跨越列数和跨越行数参数。精确控制子网格在整个布局结构中的位置关系和尺寸大小。
Subgrid 继承选项
选择子网格继承父网格的方向：列方向（grid-template-columns: subgrid）或行方向（grid-template-rows: subgrid）或同时在两个方向上继承。灵活的选项适应不同的布局需求场景。
对齐参考线显示
显示网格轨道参考线，帮助您直观地观察和验证各元素的对齐情况。参考线以虚线形式叠加在预览区域上方，清晰展示网格轨道的边界位置和对齐关系。
CSS 代码生成
自动生成完整的 CSS Grid 和 Subgrid 代码。代码包含详细的注释说明和兼容性处理方案，可直接复制到项目中使用，无需额外的代码调整工作。
响应式预览
支持在不同视口尺寸下预览布局效果，从桌面端到移动端全面覆盖。观察布局在不同屏幕尺寸下的响应式表现，确保在各种设备上都有良好的显示效果。
兼容性检测
自动检测当前浏览器对 CSS Subgrid 特性的支持情况，对于不支持的浏览器提供使用普通嵌套 Grid 的降级方案建议和兼容性代码示例。
学习辅助
提供 Subgrid 核心概念说明和常用布局模式示例，帮助开发者快速理解 Subgrid 的工作原理。通过实际动手操作和可视化实时预览来加深对布局技术的理解和全面掌握。
移动端适配与触摸交互支持
工具界面针对移动设备进行了全面优化适配，支持触摸手势操作和响应式布局调整。开发者可以在手机和平板设备上流畅地进行Subgrid布局的设计和调试工作，随时随地验证布局效果，提升开发效率和工作灵活性。