CSS Grid 布局生成器
使用可视化编辑器设计 CSS Grid 布局。使用 fr、px 或 auto 单位设置列和行，配置间距，跨越单元格，并导出干净的 CSS。
미리보기
셀을 클릭하여 선택한 후 아래에서 span을 설정하세요.
Grid 설정
px
px
CSS 코드
복사됨!
什么是 CSS Grid 生成器？
CSS Grid 生成器是一个可视化工具，用于使用 CSS Grid 设计二维布局。您可以定义列、行和间距，然后单击单元格以设置跨度值。该工具会生成相应的 CSS 代码，您可以将其复制到您的项目中。它消除了在学习或原型设计布局时记忆 Grid 语法的需要。
如何构建 CSS Grid 布局
- 定义列 — 使用 fr、px 或 auto 输入列定义（例如，
1fr 1fr 1fr） - 定义行 — 以相同的方式输入行定义
- 设置间距 — 以像素为单位调整列和行间距值
- 点击应用 — 预览网格更新以显示您的布局
- 跨越单元格 — 单击任何单元格并设置列/行跨度值
- 复制 CSS — 单击复制按钮以获取生成的代码
为什么要使用此 CSS Grid 生成器？
- 可视化反馈 — 实时查看您的网格布局更新
- 灵活的单位 — 对列和行使用 fr、px、auto 或任何有效的 CSS 长度单位
- 单元格跨越 — 单击单元格以跨越多个列或行
- 干净的 CSS — 生成的代码使用标准的 Grid 属性，可直接用于生产环境
- 无需帐户 — 免费且完全在您的浏览器中运行
FreeToolbox 与其他 Grid 生成器的比较
| 功能 | FreeToolbox | CSS Grid Generator | Layoutit |
|---|---|---|---|
| 单元格跨越 | 是 | 是 | 是 |
| 自定义单位 | fr, px, auto | fr, px | fr, px, % |
| 实时预览 | 是 | 是 | 是 |
| 广告 | 极少 | 无 | 适中 |
| 暗黑主题 | 是 | 否 | 否 |
常见问题
列和行可以使用哪些单位？
您可以使用任何有效的 CSS 网格轨道值：fr（分数单位）、px（像素）、auto、百分比、minmax() 等。例如：1fr 200px auto。
如何使单元格跨越多个列？
在预览中单击一个单元格以选择它，然后在下面的面板中设置“列跨度”值。单击“设置跨度”以应用。
我可以创建命名的网格区域吗？
此工具侧重于使用跨度语法基于轨道进行 Grid 定义。对于命名的 grid-template-areas，您需要手动将其添加到生成的 CSS 中。
当跨度重叠时会发生什么？
浏览器的网格自动放置算法会处理重叠的跨度。某些单元格可能会移动位置。如果布局看起来不符合预期，请重置跨度。
这个工具是免费的吗？
是的，完全免费，没有限制或注册要求。