关于 CSS 网格系统生成器
该工具用于生成响应式网格系统代码，支持 Flex/Grid 两种模式、断点配置、预览和 HTML 示例输出。
核心功能
- 布局模式切换：支持 Flex 与 CSS Grid 两套生成方案。
- 基础参数配置：列数、间距、容器宽度、内边距可调。
- 断点体系：可配置 sm/md/lg/xl/2xl 断点值。
- 实时预览：查看不同参数下网格排列效果。
- 代码导出：生成并复制 CSS 与示例 HTML。
使用说明
- 选择 Flex 或 Grid 模式。
- 设置列数、gap、容器参数。
- 配置响应式断点。
- 查看预览并复制 CSS/HTML 代码。
使用场景
- 后台系统与营销页栅格搭建。
- 设计系统响应式布局规范统一。
- 快速初始化项目基础网格样式。
常见问题
该选 Flex 还是 Grid？
二维布局（行列同时控制）优先 Grid；一维分布（主轴对齐）可优先 Flex。
断点值如何确定？
建议结合目标设备分布与设计稿尺寸，先定义主断点，再做少量业务微调。