CSS Subgrid 布局构建器 - 对齐嵌套网格轨道

在工具页面的顶部配置区域，设置父网格的基本布局参数：

• 列数设置 - 设置父网格的列数，例如 3 列、4 列或更多列数
• 行数设置 - 设置父网格的行数
• 列间距（column-gap） - 设置相邻列之间的间距数值
• 行间距（row-gap） - 设置相邻行之间的间距数值

设置完成后，预览区域会自动显示父网格的基本框架结构。

点击添加子网格按钮，在父网格中添加子网格容器元素。设置子网格容器的位置参数：

• 起始列位置 - 子网格从第几列开始放置
• 起始行位置 - 子网格从第几行开始放置
• 跨越列数 - 子网格横向跨越多少列
• 跨越行数 - 子网格纵向跨越多少行

子网格容器在预览区域中会以不同颜色高亮显示，方便辨识。

为子网格容器启用 Subgrid 轨道继承功能：

• 选择 grid-template-columns: subgrid 使子网格继承父网格的列轨道定义
• 选择 grid-template-rows: subgrid 使子网格继承父网格的行轨道定义
• 也可以同时启用列和行两个方向的 Subgrid 继承

在子网格容器中添加子元素，观察它们如何自动对齐到父网格的轨道上。您可以调整父网格的参数，观察子网格中的元素如何同步变化。

开启对齐参考线功能，更清晰地观察各元素之间的对齐关系。尝试不同的 Subgrid 配置方案，理解列继承、行继承和双向继承的不同效果。

完成布局设计后，点击生成代码按钮获取完整的 CSS 代码。代码中包含了 Grid 容器样式、子网格样式和兼容性处理方案。

将生成的代码复制到项目中使用。建议在实际项目中测试布局效果，确保在目标浏览器和设备上的显示符合预期。