CSS Subgrid生成器能做什么？
CSS Subgrid生成器是一款免费在线工具，用于可视化配置CSS Grid子网格布局。支持列/行subgrid开关、轨道定义、间距控制，提供实时预览和CSS/HTML代码生成。适合前端开发者快速实现嵌套网格对齐布局。
核心功能
- 可视化配置：拖拽调节列数、间距、轨道定义
- Subgrid开关：独立控制列/行subgrid
- 实时预览：配置即预览，父网格(蓝)和子网格(绿)清晰区分
- 代码生成：一键生成CSS和HTML代码
- 预设布局：卡片、表单、仪表盘、导航4种预设
使用教程
1. 设置父网格列数和轨道定义
2. 开启列/行subgrid
3. 调节间距和子项数
4. 点击复制获取代码
应用场景
场景1：卡片列表对齐
多张卡片内部元素（标题、描述、按钮）需要跨卡片对齐时，subgrid让所有卡片的对应行共享同一轨道高度。
场景2：表单布局
表单标签和输入框需要精确对齐，subgrid让嵌套的表单组继承父网格的列定义。
场景3：仪表盘
仪表盘的嵌套面板需要对齐到同一网格系统，subgrid确保所有面板的内部元素与整体布局对齐。
扩展知识
CSS Subgrid是CSS Grid Level 2规范的核心特性，于2023年在所有主流浏览器中实现。它解决了Grid嵌套的核心痛点：子网格无法与父网格轨道对齐。传统做法需要手动计算或使用固定尺寸，subgrid直接继承父网格定义，代码更简洁、维护更容易。关键语法：grid-template-columns: subgrid 和 grid-template-rows: subgrid，分别控制列和行方向的继承。