design
免费
无需注册
二维码生成器
通过在格子上拖动项目可视化构建CSS Grid布局，并导出CSS。
正在加载工具…
关于此工具
使用自定义轨道大小（fr、px、%、auto）定义列和行，设置间距，并在实时网格预览上点击拖动以跨多个格子延伸项目。工具生成可直接复制的grid-template-columns、grid-template-rows、gap和grid-column/grid-row声明。可选择指定命名网格区域。
使用方法
- 1 第一步：设置列数（1-12）和行数（1-8）以及间距大小。
- 2 第二步：使用fr、px、%或auto单位输入每列和每行的轨道大小。
- 3 第三步：在网格格子上点击并拖动以放置和调整项目大小。
- 4 第四步：复制生成的CSS并粘贴到您的样式表中。