CSS Grid 演练场
新调整网格列、间距与对齐方式，实时预览并复制 CSS。
Identical neighbouring tracks collapse into repeat() automatically.
Runs entirely in your browser. Nothing is uploaded.
交互式 CSS Grid 生成器与在线演练场
这款 CSS Grid 生成器将抽象的网格语法变成可视、可拖拽的操作界面。设置列数和行数，实时预览随时更新，效果满意后一键复制干净的 CSS、Tailwind 或 HTML 代码。无需安装，无需注册账号，整个 CSS Grid 演练场完全在浏览器本地运行，您构建的布局永远不会被上传。
无论您是初学 Grid 布局、快速原型设计一个后台仪表盘，还是想把12列框架网格转换为纯 CSS，这里几秒钟就能搞定。与只输出 CSS 且不支持逐项编辑的 Layoutit，或没有 Tailwind 输出也没有可分享链接的最简版工具相比，UtiloKit 在同一界面集成了三种输出格式和命名区域支持。
定义轨道：列、行与单位
网格由轨道来定义。在"轨道"选项卡中，您可以添加任意数量的列和行，并为每条轨道选择单位：fr 表示弹性比例，px 或 % 表示固定尺寸，auto 根据内容自适应，minmax() 用于设置最小与最大值之间弹性伸缩的轨道。相邻的相同轨道会自动用 repeat() 合并，三列等宽时会输出整洁的 repeat(3, 1fr) 而不是 1fr 1fr 1fr。
把列数设为12，即可得到经典的类 Bootstrap 框架网格的纯 CSS 实现。设置两列两行可快速完成2×2布局。每次调整，grid-template-columns 和 grid-template-rows 的输出会即时更新，让您随时看到布局对应的精确代码。
用 auto-fit 与 minmax() 实现响应式布局
响应式 CSS Grid 生成器模式会自动生成无需媒体查询的现代响应式写法：repeat(auto-fit, minmax(200px, 1fr))。选择 auto-fit 或 auto-fill，设置最小单元格宽度，拖拽预览区即可看到列数随容器宽度自动增减——宽屏多列，手机端单列。这是构建自适应卡片网格最简洁的方案，完全不用写媒体查询。
auto-fit 与 auto-fill 的区别在于容器可容纳的列数多于实际条目时的表现：auto-fit 会折叠空轨道，让已有条目拉伸填满空间；auto-fill 保留空轨道，条目维持最小尺寸。在这个演练场中您可以实时切换并直观对比效果，这是静态文档或文章无法做到的。
拖拽放置条目，或使用命名区域
在轨道模式下，预览区可交互：跨单元格拖拽即可放置一个跨越多格的条目，点击条目选中后可在条目面板中精确调整 grid-column 和 grid-row 的起始位置与跨度。这是理解跨格用法最直观的方式——比看文档更快，也比在 CodePen 反复试验更高效。
更偏好语义化的写法？"区域"选项卡支持 grid-template-areas——将布局按命名行绘制，例如 'header header' 'sidebar main'，生成器会自动输出完整模板以及每个区域的 grid-area 规则。非常适合构建含页头、侧边栏、主内容和页脚的经典页面框架。
复制 CSS、Tailwind 或 HTML，并通过链接分享
每种布局支持三种导出方式。CSS 选项卡输出容器规则和逐项规则；Tailwind CSS Grid 生成器选项卡生成对应的工具类——如 grid grid-cols-3 gap-4、col-span-2，以及自定义轨道的任意值写法；HTML 选项卡提供可直接粘贴的标记代码。通过分享链接，整个配置都编码进 URL，团队成员打开后看到的是完全相同的网格——无需账号，无需导出，无需截图。
免费、私密、即时——无上传，无账号
无需注册，无需下载。添加轨道、拖拽条目、切换响应式 auto-fit 模式、导出代码，所有操作均在浏览器本地完成，您的作品永远不会离开设备。与 Figma 等需要账号、将作品存储在服务器上的在线设计工具不同，这款 CSS Grid 演练场完全私密。将这个网格布局生成器加入书签，随时在任何设备（包括 iPhone 和 Android）上构建、学习或复制 CSS Grid 布局。
Frequently asked questions
CSS Grid 布局是怎么工作的？
CSS Grid 将一个元素变为二维布局容器。在容器上设置 display: grid，用 grid-template-columns 和 grid-template-rows 定义列轨道和行轨道，浏览器便会将各子元素放入对应的单元格中。例如，grid-template-columns: repeat(3, 1fr) 创建三列等宽布局，子元素从左到右、从上到下依次填入。与旧式浮动布局或 Flexbox 不同，Grid 同时控制行与列，您只需在容器上设置一个属性就能掌管两个轴的布局。
CSS 中的 grid 属性怎么用？
在容器上添加 display: grid，然后描述其轨道。最简写法只需一行：display: grid; grid-template-columns: 1fr 1fr; ——即两列等宽布局。在此基础上可添加 grid-template-rows 定义显式行，用 gap 设置间距，用 grid-column: span 2 让某个子元素跨越两格。简写属性 grid 可将行、列和区域合并为一条声明，但大多数开发者更倾向于分别设置 grid-template-columns、gap 和对齐方式，因为这样可读性更好。本生成器会自动为您生成这些规则。
grid-template-columns 和 grid-template-rows 是什么意思？
它们分别定义每条列轨道和行轨道的大小。grid-template-columns: 200px 1fr 1fr 表示第一列固定200px，其余两列平分剩余空间。grid-template-rows: auto 1fr 表示第一行高度由内容决定，第二行填满剩余高度。列表中每个值对应一条轨道，值的个数决定显式列数或行数。本生成器在您添加和编辑轨道时同步构建这两个列表，并实时更新预览。
fr、repeat() 和 minmax() 分别是什么意思？
fr 是"分数"单位，用于分配剩余空间，repeat(3, 1fr) 即三列等宽。repeat(n, 值) 是重复轨道模式的简写，repeat(4, 1fr) 等同于 1fr 1fr 1fr 1fr。minmax(最小值, 最大值) 定义一条在最小值与最大值之间弹性伸缩的轨道，minmax(150px, 1fr) 表示列宽最小150px，可随容器扩展。将它们组合起来——repeat(auto-fit, minmax(150px, 1fr))——即可实现随容器宽度自动增减列数的响应式网格，无需媒体查询。
如何不写媒体查询实现响应式 CSS Grid？
使用带 auto-fit（或 auto-fill）和 minmax() 的 repeat()，网格会自动回流：grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))。每列最小200px，浏览器根据容器宽度自动放置尽可能多的列，窄屏时减少列数，宽屏时增加列数。切换到本生成器的响应式模式，设置最小单元格宽度后复制代码即可。这是构建自适应卡片网格的最简方案，从移动端到桌面端一行代码搞定。
grid-template-areas 是什么？
grid-template-areas 允许您为布局区域命名，并以类似 ASCII 图的方式绘制布局。给每个子元素设置 grid-area 名称，然后像这样定义网格：grid-template-areas: 'header header' 'sidebar main' 'footer footer'。某个名称出现在多个单元格中，该区域就会跨越这些单元格；用点号（.）可留空某个单元格。这是构建经典页面框架——页头、侧边栏、主内容、页脚——最直观的方式，因为模板看起来就像布局本身。本工具的"区域"选项卡会自动生成模板及每个命名区域对应的 grid-area 规则。
如何创建 2×2 或三列网格？
创建 2×2 网格：设置两列两行——grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;——然后放入四个条目。创建三列网格：使用 grid-template-columns: repeat(3, 1fr)，让条目自动填入所需行数。在本工具中，您只需设置列数和行数，预览立即更新，无需手动输入代码。当相邻轨道大小相同时，生成器会自动使用 repeat() 简写。
什么是12列网格？
12列网格是由 Bootstrap 和 Foundation 等框架推广的设计规范，将页面均分为12列。12这个数字能被2、3、4、6整除，因此非常灵活：组件可占6列（半宽）、4列（三分之一）、3列（四分之一）等任意整数列。用 CSS Grid 一行代码即可实现：grid-template-columns: repeat(12, 1fr)，子元素使用 grid-column: span 4 来控制宽度。在本工具中将列数设为12，即可获得经典框架网格的纯 CSS 代码，无需依赖 Bootstrap。
CSS Grid 和 Flexbox 有什么区别？
Grid 是二维布局，同时控制行和列；Flexbox 是一维布局，沿单条轴（行或列）排列条目。需要构建整体页面布局或对齐行列的卡片网格（如仪表盘、图片墙、页面框架）时选 Grid；需要处理一排内容（如导航栏、工具栏或按钮行）时选 Flexbox。两者可以配合使用：Grid 负责外层页面结构，Flexbox 用于单个单元格内部的排列。
如何在 Tailwind CSS 中使用 Grid？
Tailwind 内置了 Grid 工具类：添加 grid 加上 grid-cols-3 实现三列等宽，gap-4 设置间距，子元素用 col-span-2 / row-span-2 实现跨格。grid-cols-3 编译为 repeat(3, minmax(0, 1fr))。对于自定义轨道——例如响应式 auto-fit——可使用任意值：grid-cols-[repeat(auto-fit,minmax(150px,1fr))]。将输出切换到 Tailwind 选项卡，本生成器会为容器和每个条目生成精确的工具类，直接粘贴到 JSX 或 HTML 即可使用。
如何让条目跨越多列或多行？
在子元素上使用 grid-column 和 grid-row。grid-column: span 2 使条目横跨两列；grid-column: 1 / 3 表示从第1条线到第3条线（同样是两列）。纵向跨行同理：grid-row: span 2。在 Tailwind 中对应 col-span-2 和 row-span-2。在本演练场中，您可以在预览区跨单元格拖拽来创建跨格条目，也可以在条目面板中输入精确的起始值和跨度值。CSS 和 Tailwind 输出均实时同步更新。
如何设置网格条目之间的间距？
gap 属性用于设置轨道间距：gap: 16px 在所有行与列之间添加16px间距。也可以分别设置两个轴：gap: 24px 16px（先行间距后列间距），或直接使用 row-gap 和 column-gap。gap 只影响单元格之间的空间，不会在网格外边缘添加内边距——这是常见的混淆点。使用本工具的行间距和列间距控件，可以联动设置统一间距，也可以解除联动分别精细调整。
这个 CSS Grid 生成器免费吗？比 Layoutit 或其他工具好在哪里？
完全免费，无需注册，无需安装。Layoutit Grid 是个不错的起点，但没有 Tailwind 输出，复制 grid-area 规则还需要切换到单独的选项卡。其他一些最简版 CSS Grid 生成工具缺少逐项控件和可分享链接。UtiloKit 在同一界面整合了 Tailwind CSS 输出、命名模板区域、响应式 auto-fit 模式、可分享链接以及交互式拖拽跨格编辑器。所有内容均在浏览器本地生成，您的布局永远不会被上传。
这个 CSS Grid 生成器支持在 iPhone 或 Android 上使用吗？
支持。本工具完全响应式，可在任何现代移动浏览器中运行，包括 iPhone 上的 Safari 和 Android 上的 Chrome。随时随地构建网格布局，复制 CSS 或 Tailwind 代码后粘贴到项目中即可。由于全部在客户端运行，无需上传、无需账号、无需等待。页面加载后甚至可以离线使用。拖拽跨格条目编辑器已针对触控优化，无需鼠标也能构建复杂的网格布局。
