CSS Grid 布局生成器
设好列和行,在格子上拖出区域来放置项目,网格 CSS 连同对应 HTML 一键复制。
网格都在你的浏览器里生成,这里设置的内容不会上传到 BroBroGo。
常见问题
怎么在网格上放置项目?
在格子上按住并拖动,框出一块矩形区域,松手后它就成为一个跨这些列和行的子项。你画的每个项目都会在 CSS 里生成自己的 grid-column 和 grid-row 规则,并在 HTML 里对应一个 div。项目可以重叠,后画的盖在上面;点项目上的 × 即可删除。
列和行可以设成不同尺寸吗?
可以。每条轨道都有自己的尺寸输入框,你可以填任意 grid 取值——1fr、200px、auto、min-content 或 minmax(120px, 1fr)。尺寸相同的轨道会折叠成 repeat(),让输出更简洁。列间距和行间距各自设置,两者相同时会合并成一个 gap。
生成的代码怎么用?
把 CSS 和 HTML 一起复制走。HTML 给你一个容器,里面每个项目一个 div;CSS 定义网格并给每个项目定位。两段都粘进你的项目,就能还原你在这里画的布局。