本工具已经具备：

• A/B 两种布局模式
• WordPress 自动适配
• 标题对齐
• 全局统一高度
• 棋盘格背景
• 一键复制代码
• 行列可调且内容不丢失
• 空格子跳过
• 自动换行
• 保存 HTML

是一款非常完整、灵活、专业的 HTML 网格生成器。

📘 Python 网格布局生成器 — 使用说明书（A/B 模式版）

本工具用于快速生成适用于 WordPress 或 独立 HTML 页面 的网格布局 HTML 代码。 支持标题、副标题、棋盘格背景、统一高度、标题对齐、空格子跳过、复制代码等功能。

界面简洁、操作直观，非常适合：

• WordPress 内容创作者
• 需要制作整齐网格布局的网页编辑者
• 需要快速生成 HTML 结构的设计师
• 想要批量展示信息（如课程、服务、功能点）的用户

🧭 一、界面结构说明

启动程序后，界面主要分为四个区域：

1. 页面标题设置区

用于设置整个页面的：

• 大标题
• 副标题

如果留空，则不会在 HTML 中显示。

2. 布局模式设置区（核心功能）

这里可以选择页面布局方式，目前提供两种：

✔ A：响应式最大宽度（推荐）

✔ B：自动调整列数（智能响应式）

并提供：

• A 模式最大宽度（px）：仅 A 模式生效

3. 网格内容设置区

包括：

• 行数（默认 3）
• 列数（默认 3）
• “跳过空格子”选项
• “重新生成输入格子”按钮

每个格子包含：

• 标题输入框
• 内容输入框

修改行列后，已输入内容不会丢失。

4. HTML 输出区

点击“生成 HTML”后，HTML 代码会显示在此区域。 你可以：

• 点击 复制代码（自动复制到剪贴板）
• 点击 保存 HTML 文件（导出为 .html 文件）

🧩 二、A/B 两种布局模式的详细说明与对比

这是本工具最核心的部分。

🟦 模式 A：响应式最大宽度（推荐默认）

📌 适用场景

• 独立 HTML 页面
• 需要在大屏幕上保持美观
• 不希望页面太宽或太窄
• WordPress 中也能自然适配主题宽度

📌 行为说明

• 小屏幕：自动占满屏幕
• 中屏幕：占 90% 左右
• 大屏幕：最大宽度由你设置（默认 1400px）
• WordPress 中：主题会自动限制宽度（此设置不影响 WP）

📌 特点

• 最通用
• 最美观
• 不破坏 WordPress 样式
• 适合大多数内容展示场景

🟩 模式 B：自动调整列数（智能响应式）

📌 适用场景

• 想让页面自动适配手机、平板、电脑
• 不想手动设置列数
• 更注重移动端体验

📌 行为说明

根据屏幕宽度自动调整列数：

屏幕宽度	列数
	1 列
	2 列
≥ 900px	3 列

📌 特点

• 最智能
• 最适合移动端
• 会覆盖你手动设置的列数
• WordPress 和独立页面都能完美适配

🟧 A / B 模式对比表

功能点	A 模式	B 模式
最大宽度可自定义	✔	✘
自动调整列数	✘	✔
移动端适配	良好	最佳
WordPress 适配	完美	完美
适合内容类型	图文展示、服务介绍	移动端优先、卡片式内容
是否覆盖用户设置的列数	否	是（自动）

🧭 三、网格内容输入说明

每个格子包含：

• 标题（可空）
• 内容（可空）

你可以自由填写：

• 课程介绍
• 服务内容
• 产品功能
• FAQ
• 团队成员
• 任何需要网格展示的信息

✔ “跳过空格子”选项

如果勾选：

• 标题和内容都为空的格子将不会生成
• 适合不规则数量的内容

🧭 四、统一高度与标题对齐（自动处理）

本工具自动处理两个难点：

✔ 1. 所有格子高度一致

无论内容多少，所有格子高度统一。

✔ 2. 所有标题高度一致

标题永远在同一位置，不会因为内容多寡而错位。

✔ 3. 内容自动换行

不会裁切内容，也不会破坏布局。

这些功能由自动注入的 JavaScript 完成，无需用户操作。

🧭 五、使用步骤

1. 填写页面大标题、副标题（可选）
2. 选择布局模式（A 或 B）
3. 设置 A 模式最大宽度（如需要）
4. 设置行数与列数
5. 填写每个格子的标题与内容
6. 勾选是否跳过空格子
7. 点击 生成 HTML
8. 点击 复制代码 或 保存 HTML 文件
9. 将代码粘贴到 WordPress 或任何 HTML 编辑器中

🧭 六、注意事项

• 修改行列后，内容不会丢失
• 空格子可选择跳过或保留
• WordPress 中布局宽度由主题控制
• 独立页面宽度由布局模式决定
• 棋盘格背景自动根据行列计算
• 格子高度与标题高度自动统一
• 复制代码按钮可快速粘贴到 WordPress