RowxCol
3 x 3
Template
repeat(3, 1fr)
设计配色
CSS Grid 生成 - 行列轨道与间距
可视化设置行列数与间距，生成 display:grid 基础样式，适合后台布局、卡片栅格与等分轨道草稿，可直接复制到项目中调整。
CSSGrid布局
快速切换:Flexbox 可视化操作台
设计配色
CSS Grid 生成
3
3
3 × 3 网格
.grid {
display: grid;
} 使用场景
- 起草等分卡片栅格
- 生成后台基础网格骨架
- 快速确认 gap 与列数参数
如何使用
- 设置行数、列数与间距
- 预览网格结构
- 复制生成的 CSS 代码
示例输入输出
FAQ
支持复杂 grid-area 命名映射吗
本工具专注基础轨道拆解（1fr 均分池为主），高级区域命名请移步专用手写。
工具列表
相关推荐
你可以从这里继续打开相近场景的工具，减少重复搜索。
Flexbox 可视化操作台
弹性盒子一维布局微调发生器
无需脑膜炎发作的查 MDN。直观拖拽选择 Flex direction 与 Justify Content 系列属性对抗。实时在右侧 Canvas 看到你的积木是如何排列、挤压或环绕堆叠的。包含 `gap` 测试。
Design CSS Layout