网格布局生成器

使用 CSS Grid 快速搭建页面布局：选择等宽 1–12 列或填写自定义 grid-template-columns，可选定义行、设置 gap 间距与对齐方式，实时预览网格效果并生成可直接使用的完整 CSS 代码。

网格参数已就绪

列定义

行定义（可选，留空表示自动）

gap 间距（px）

justify-items

align-items

预览子项数

等宽模式使用 repeat(n, minmax(0, 1fr)) 生成列，子项会随容器宽度自适应且不会被内容撑破。

预览与代码

列数—

行数—

gap—

配置参数后点击「生成布局」，CSS 代码将显示在这里。

生成的 CSS 可直接粘贴到样式表，容器类名为 .grid-container。

生成规则

容器必备 display: grid;，列用 grid-template-columns 定义。
等宽列使用 repeat(n, minmax(0, 1fr))，n 为 1–12 的整数。
行用 grid-template-rows 定义，留空时由子项自动生成隐式行。
gap 同时设置行列间距，单位为 px。
justify-items 控制子项在列方向的对齐，align-items 控制行走方向的对齐。
全部在浏览器本地生成，不发起任何网络请求。