Loading...
Loading...
可视化搭建 CSS 网格并复制布局代码。
CSS grid 是搭二维布局最干净的方式,但轨道和对齐语法需要练。这个工具让你设置列、行、间距和对齐,网格即时成形,不用先背语法就能排出来。
选好要几列几行,设置间距,再挑 justify-items 和 align-items。实时网格用带编号的单元格渲染,下方写出对应的 CSS(grid-template-columns、grid-template-rows 和对齐)供复制。它和 flexbox 生成器天然互补:需要同时排行和列时用 grid。一切都在浏览器里运行。
设置轨道数量,工具为每个输出 repeat(n, 1fr)。
滑块设置每个单元格之间的 gap。
justify-items 和 align-items 定位每个单元格里的内容。
真实网格用带编号单元格渲染,布局一目了然。
网格 CSS 已写好,一键复制。
无账号、不上传;预览是本地渲染的真实 CSS。
先定好需要的列,只有当内容应固定落在某些行时再加行;否则让它自动流动。
设置列数和行数。
调整单元格之间的间距。
为单元格内容选 justify-items 和 align-items。
把生成的 grid CSS 复制进你的容器。
用等宽列和一致间距排卡片或缩略图。
快速把面板放到行列网格上。
看清楚轨道、间距和对齐如何组合成布局。
不用凭记忆写语法就能拿到可用的网格容器。
你的设置作为内联 grid 样式应用到真实容器上,所以预览与浏览器完全一致;同样的值序列化成可复制的 CSS 块。
无账号、无网络请求;布局在本地计算和渲染。
每次改动只更新几个内联样式,所以预览始终即时。