无需登录 数据私有 本地保存

CSS Grid布局生成器 - 在线栅格代码生成

15
0
0
0
CSS代码已复制到剪贴板

CSS Grid 布局生成器

可视化创建 CSS Grid 布局，实时生成代码

网格尺寸
1 12
1 12
间距设置
尺寸模板
对齐方式
实时预览 3×3 网格

点击网格中的色块可选中并调整其跨列/跨行属性

生成的CSS代码

CSS Grid 常见问题与知识点

什么是CSS Grid布局？

CSS Grid Layout（网格布局）是CSS中一种二维布局系统，可以同时控制行和列。与Flexbox（一维布局）不同，Grid专为复杂的二维页面布局而设计，能轻松实现以前需要大量嵌套和浮动才能完成的布局效果。它是现代Web布局的基石技术之一。

CSS Grid 和 Flexbox 的区别？

Flexbox是一维布局（沿主轴方向排列），适合组件级别的排列；Grid是二维布局（同时控制行和列），适合页面级别的宏观布局。两者互补而非替代，实际项目中常结合使用：外层用Grid定义页面结构，内层用Flexbox排列组件元素。

fr单位是什么意思？

fr（fraction）是Grid专用单位，表示"可用空间的一份"。例如grid-template-columns: 1fr 2fr 1fr表示将可用宽度分为4份，第一列占1份、第二列占2份、第三列占1份。fr单位会自动减去gap后再分配，非常灵活，是Grid布局中最推荐使用的单位。

如何在移动端使用Grid？

使用媒体查询配合Grid即可实现响应式布局。可以在移动端将多列改为单列（grid-template-columns: 1fr），或使用auto-fill和minmax()让列数自动适应屏幕宽度，无需手动设置断点。例如：grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))。

gap 和 grid-gap 有什么区别？

gap是标准属性名（CSS Box Alignment Module Level 3），grid-gap是旧版名称。现代浏览器都支持简写gap，且它同时适用于Grid和Flexbox。推荐使用gap（或row-gap/column-gap），兼容性已覆盖97%+浏览器。

如何让网格项跨越多列/行？

使用grid-column: span 2可让项跨越2列；grid-row: span 3跨越3行。也可以精确指定起止线：grid-column: 1 / 3表示从第1条线到第3条线（跨2列）。本工具支持可视化设置每个网格项的跨列/跨行属性，点击网格色块即可调整。

🔧 相关工具