可视化创建网格布局，自动生成grid-template-areas代码
⚙️ 网格设置
自定义名称：
🎨 网格编辑器（点击单元格分配区域）
📝 生成的CSS代码
👁️ 布局预览
❓ 常见问题
什么是CSS Grid模板区域？
CSS Grid模板区域（grid-template-areas）是一种使用命名区域来定义网格布局的CSS属性，通过给网格单元命名并用字符串描述布局，使CSS布局代码更直观易读。
grid-template-areas的语法是什么？
语法：grid-template-areas: 'header header header' 'sidebar main main' 'footer footer footer'; 每行字符串代表一行，空格分隔的名称代表每列的区域名，用.表示空单元格。
如何使用这个生成器？
设置行列数，选择区域名称，点击网格单元格分配区域。相同名称的单元格会自动合并为一个区域。生成完整的CSS代码可直接复制使用。
区域命名有什么规则？
区域名必须是有效的CSS标识符（字母、数字、连字符），同一名称的单元格必须形成矩形区域。用点号(.)表示空单元格。