Developer Tools
Web Utilities网格布局设计器
可视化 CSS 网格布局设计器，用于创建响应式网格布局。自定义列、行和间距，即时生成生产就绪的 CSS Grid 代码。
网格配置
快速入门模板
可视化网格设计器
生成的代码
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 10px;
width: 400px;
height: 300px;
}HTML
<div class="grid-container">
</div>使用方法
网格定位
1 / 2- starts at line 1, ends at line 21 / 3- spans 2 columns/rowsspan 2- spans 2 tracks from start position1 / -1- spans from first to last line
提示
- Use fr units for flexible columns
- Try different gap values for spacing
- Use span values for easier positioning
- Click cells to edit their properties
相关工具
关于网格布局设计器
工作原理
- 配置网格尺寸和间距
- 在可视化设计器中添加和定位单元格
- 编辑单元格的内容、类名和背景颜色
- 使用预设模板快速开始
- 复制或下载生成的 CSS 和 HTML 代码
常见使用场景
- 网站布局设计和原型制作
- 学习 CSS Grid 基础知识
- 创建响应式网格布局
- 仪表板和管理面板设计
- 基于卡片的布局系统
常见问题
什么是 CSS Grid，这个工具如何帮助我？
CSS Grid 是一个强大的布局系统，允许您创建具有行和列的复杂响应式布局。此工具提供可视化界面来设计网格布局，无需手动编写代码，然后为您生成相应的 CSS 和 HTML 代码。
如何指定元素的网格位置？
网格位置使用「开始 / 结束」格式，数字指网格线。例如，「1 / 3」表示从第 1 行开始，在第 3 行结束（跨越 2 个轨道）。您也可以使用「span 2」从起始位置跨越 2 个轨道，或使用「1 / -1」从第一行跨越到最后一行。
我可以用这个工具创建响应式网格布局吗？
当然！该工具生成的 CSS Grid 代码本身就是响应式的。您可以将容器宽度设置为 100% 以实现完全响应式，网格将自动调整。对于更复杂的响应式行为，可以将生成的代码与 CSS 媒体查询结合使用。
什么是预设布局，如何使用它们？
预设布局是常见的网格模式，如页眉+内容+侧边栏、仪表板网格和卡片布局，为您的设计提供起点。单击任意预设即可立即应用其配置，然后根据需要自定义。
如何添加、编辑或删除网格项目？
单击「添加单元格」创建新的网格项目。单击任何现有单元格可选择并编辑它。选中单元格后，您可以修改其内容、类名、位置和背景颜色。使用「复制」按钮复制单元格，或使用「删除」按钮删除它们。
网格配置选项控制什么？
列和行设置网格中的轨道数。间距控制网格项目之间的间距。宽度和高度设置容器的整体尺寸。容器类名设置生成代码中主网格容器的 CSS 类。
我可以导出网格布局在网站中使用吗？
当然！该工具生成您可以复制或下载的 CSS 和 HTML 代码。CSS 包含所有必要的网格属性和项目定位。只需复制代码并粘贴到您的项目中，或下载文件并将其包含在您的网站中。
如何理解可视化网格设计器？
可视化设计器显示网格布局的实时预览。网格线定义轨道，彩色矩形表示根据 grid-column 和 grid-row 值定位的网格项目。单击项目可选择它们，其属性将显示在下方编辑器中。
什么是 fr 单位，应该何时使用？
fr（分数）单位在 CSS Grid 中按比例分配可用空间。此工具默认使用「repeat(n, 1fr)」来获得相等的列/行大小，但您可以修改生成的 CSS 以使用不同的 fr 值，如「1fr 2fr 1fr」创建 1:2:1 比例的列。
我可以创建杂志风格的复杂布局吗？
当然！使用重叠的网格位置创建杂志风格的布局。例如，设置一个项目跨越多个列和行，同时在剩余单元格中放置较小的项目。可视化设计器使实验复杂定位变得简单。
生成的 CSS 代码与所有浏览器兼容吗？
生成的 CSS Grid 代码适用于所有现代浏览器（Chrome、Firefox、Safari、Edge），自 2017 年起就已受支持。对于旧版浏览器支持，您可能需要使用 flexbox 或 floats 添加备用布局。
如何了解更多 CSS Grid 属性和技术？
这个工具非常适合通过实验学习 CSS Grid！尝试不同的配置，检查生成的代码，查看更改如何影响布局。帮助部分解释了网格定位语法，您还可以参考 CSS Grid 文档了解高级功能。