CSS网格系统生成器
按自定义断点、列数、列间距、边距和最大宽度生成响应式栅格。可导出CSS、工具类或Tailwind配置。
免费 在浏览器中运行 无需注册
正在加载CSS网格系统生成器…
您的文件绝不离开您的设备
如何使用CSS网格系统生成器
- 1
在此页面打开CSS网格系统生成器，它直接在浏览器中加载。
- 2
添加文件、文本或数值，并调整设置。
- 3
复制或下载结果。不会上传或存储任何内容。
关于此工具
网格系统为每个页面提供相同的底层结构：固定的列数、一致的列间距和最大内容宽度，并在不同屏幕尺寸下自动适配。这款网格系统生成器让你一次定义好结构并导出可用代码，设计师和开发者就能基于同一套网格工作。
如何创建网格
- 以像素设置最大内容宽度。
- 编辑断点：为每种屏幕尺寸选择列数、列间距和外边距。
- 查看列的实时预览。
- 如需导出类名，请设置类名前缀。
- 将代码复制为普通CSS、工具类或Tailwind配置。
常见配置
| 屏幕 | 列数 | 列间距 |
|---|---|---|
| 手机 | 4 | 16px |
| 平板 | 8 | 24px |
| 桌面 | 12 | 24到32px |
十二列很受欢迎，因为它可以平均分成二分之一、三分之一、四分之一和六分之一。
小贴士
- 与设计稿保持一致：使用与Figma布局网格相同的列数和列间距。
- 限制行宽：最大宽度约1200到1440px，可让大屏幕上的文字依然易读。
- 使用间距刻度：8、16、24或32px的列间距和边距让间距更统一。
- 根据内容决定断点：在布局开始变形的位置添加断点，而不只是按设备尺寸。
网格系统与CSS Grid
网格系统是一种设计约定，CSS Grid是可以实现它的浏览器功能。生成的代码使用现代CSS，无需任何框架。网格内的一维布局请使用Flexbox生成器，文字尺寸可用字体比例生成器设置。
常见问题
网格应该有多少列？
桌面端最常用十二列，因为它可以分成二分之一、三分之一和四分之一。手机通常用4列，平板用8列。
什么是列间距？
列与列之间的空白。手机上常用16px，大屏幕上常用24到32px。
可以把网格导出为Tailwind配置吗？
可以。选择Tailwind格式即可获得屏幕和间距的配置。
可以自定义断点吗？
可以。每个断点的宽度、列数、列间距和边距都可以修改。
最大宽度应该设多少？
大约1200到1440像素适合大多数网站，能让宽屏上的文字行长保持舒适。
代码需要Bootstrap或其他框架吗？
不需要。生成的CSS和类名都是纯CSS，可以独立使用。