RowxCol
3 x 3
Template
repeat(3, 1fr)
design / 可用工具
现代响应式网格轨道分割器
用最粗暴直白的方式划分横竖行列，并设置沟槽（Gap）。迅速拿到能够直接构建如管理后台 Layout 或电商橱窗画廊的 `display: grid` 参数。自带 Holy Grail 三栏布局等快速挡位。
DesignCSSLayout
快速切换： Flexbox 可视化操作台
设计与布局
CSS Grid 二维栅格引擎
3
3
CSS Grid Output
.grid {
display: grid;
} 使用场景
- 构建一个带有 `gap: 24px` 的 4 列并带响应折叠基数的图片瀑布墙底层。
如何使用
- 1. 通过右上角的增减按钮生成大纲骨架，并在下方拉伸 Gap 宽度，代码将实时组合供复制。
示例输入输出
FAQ
支持复杂 grid-area 命名映射吗
本工具专注基础轨道拆解（1fr 均分池为主），高级区域命名请移步专用手写。
工具列表
相关推荐
你可以从这里继续打开相近场景的工具，减少重复搜索。
Flexbox 可视化操作台
弹性盒子一维布局微调发生器
无需脑膜炎发作的查 MDN。直观拖拽选择 Flex direction 与 Justify Content 系列属性对抗。实时在右侧 Canvas 看到你的积木是如何排列、挤压或环绕堆叠的。包含 `gap` 测试。
Design CSS Layout