CSS Grid布局在线生成工具 - 可视化网格布局编辑

什么是Grid 布局？

Grid 是 CSS 的二维布局系统，通过 grid-template-columns 和 grid-template-rows 同时定义行与列，配合 gap、justify-items、align-items 等属性精确控制网格内容的位置，适合搭建页面骨架与数据面板。

Yeo工具箱的 Grid 布局生成器让你用数字和下拉框配置行列数、间距与对齐方式，实时预览网格效果并生成标准 Grid CSS，适合快速搭建栅格原型。

如何使用Yeo工具箱的Grid 布局？

1. 设置列数和行数
2. 调节网格间距 gap
3. 选择 justify-items 与 align-items 对齐方式
4. 预览区实时显示网格效果，一键复制 CSS 代码

常见使用场景

• 场景1：商品卡片、图片墙的网格布局
• 场景2：仪表盘数据面板的行列排布
• 场景3：后台管理页面的栅格骨架
• 场景4：响应式画廊与作品集展示

使用小贴士

• 需要自适应列宽时优先使用 1fr 或 repeat(auto-fill, minmax(120px, 1fr))
• Grid 子项可用 grid-column / grid-row 跨行跨列，实现复杂区域划分

常见问题

Q1: Grid 和 Flex 怎么选？

Grid 适合二维布局（同时控制行和列），如页面骨架、图片墙；Flex 适合一维排列（一行或一列），如导航、按钮组。两者可以嵌套混用。

Q2: grid-template-columns 怎么写？

可用 repeat(3, 1fr) 表示三等分，或 1fr 2fr 表示第一列占 1 份、第二列占 2 份，也可用固定像素 auto minmax() 等组合。

Q3: 1fr 是什么意思？

fr 是 Grid 的弹性单位，表示剩余空间的分配比例。三列都用 1fr 时三列等宽；1fr 2fr 时第二列宽度是第一列的两倍。

更新日志

• 2026-08-04 更新：Yeo工具箱 Grid 布局工具正式上线

⚠ 声明：本工具所有数据处理均在您的浏览器本地完成，数据不会被上传到任何服务器。