CSS Grid 生成器

可视化生成 CSS Grid 布局代码，支持行列数、间距、对齐方式配置，实时预览网格效果，一键复制 CSS 和 HTML 代码。

配置

行数

列数

行高

列宽

间距 (gap)

justify-items

align-items

实时预览

代码输出

.grid-container {
  display: grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  justify-items: stretch;
  align-items: stretch;
}

使用说明

功能介绍

CSS Grid 是一种强大的二维布局系统，可以同时控制行和列的布局。本工具帮助您可视化配置 Grid 容器的行列数、间距、对齐方式等参数，实时预览效果并生成可直接使用的 CSS 和 HTML 代码。

操作步骤

设置行列数（1-12），输入行高（如 100px、auto、1fr）和列宽（如 1fr、200px、repeat(3, 1fr)），拖动滑块调整间距，选择 justify-items 和 align-items 对齐方式，预览区实时显示效果，点击「复制 CSS」或「复制 HTML」按钮获取代码。

注意事项

行高和列宽支持所有合法 CSS 值（如 100px、1fr、auto、minmax(100px, 1fr)、repeat(3, 1fr) 等）；行数和列数限制为 1-12 以保证预览性能；生成的 HTML 中子元素数量等于行数乘以列数。