一、通用型栅格系统（适用于大多数设计场景）

1. 12 列栅格系统（主流）

• 核心规则：将页面垂直划分为 12 等列，列宽随屏幕尺寸自适应，列间距（Gutter）通常为 16-32px（移动端可缩小），页面左右保留边距（Margin）。
• 核心优势：
  • 12 的约数多（1,2,3,4,6,12），可灵活组合出多种模块宽度（如 “3 列 + 9 列”“4 列 + 4 列 + 4 列”“6 列 + 6 列”），适配主内容区、侧边栏、卡片组等各类布局；
  • 学习成本低，是行业 “通用语言”，设计师与前端沟通效率极高（前端可直接用 CSS Grid/Flexbox 实现）。
• 适用场景：几乎所有网页 —— 电商首页（商品卡片、分类栏）、资讯平台（文章列表、侧边推荐）、企业官网（产品展示、服务介绍）、工具类 APP 网页版（功能模块、数据展示）。

2. 24 列栅格系统（高精度适配）

• 核心规则：垂直划分为 24 等列，列宽更精细，列间距通常为 8-16px，支持更细分的模块宽度组合（如 “5 列 + 7 列 + 12 列”“2 列 + 22 列”）。
• 核心优势：
  • 比 12 列更灵活，能满足 “高精度排版” 需求（如数据仪表盘、复杂表单、多模块嵌套的页面）；
  • 适配大尺寸屏幕（如 2K/4K 显示器）时，可避免 “模块过宽导致阅读疲劳”，通过细分列数让内容排布更紧凑、有序。
• 适用场景：
  • 数据密集型页面（如后台管理系统、数据分析平台、金融 APP 的行情页）；
  • 大尺寸屏幕优先的设计（如桌面端工具软件、企业内部协作平台）；
  • 多模块嵌套的复杂页面（如电商的 “商品详情页”—— 主图区、参数表、评价区、推荐区需精细划分）。

3. 6 列栅格系统（移动端优先）

• 核心规则：垂直划分为 6 等列，列宽较宽，列间距通常为 8-12px，整体布局更简洁，适配小屏幕时无需频繁合并列。
• 核心优势：
  • 专为移动端（手机、小尺寸平板）设计，避免 “12 列在小屏幕上列宽过窄” 的问题；
  • 组合简单（如 “2 列 + 4 列”“3 列 + 3 列”），适合移动端 “垂直堆叠 + 少量横向分栏” 的布局逻辑。
• 适用场景：
  • 移动端优先的网页（如外卖 APP 网页版、社交 APP 的 H5 活动页、移动端博客）；
  • 内容简洁的轻量页面（如登录页、注册页、活动规则页、产品介绍单页）。

二、框架内置栅格系统（技术绑定型，高效开发）

1. Bootstrap 栅格系统（12 列，普及）

• 所属框架：Bootstrap（前端开发领域流行的 UI 框架之一，支持 HTML/CSS/JS）。
• 核心规则：基于 12 列栅格，预设 5 套响应式断点（超小屏 <576px、小屏≥576px、中屏≥768px、大屏≥992px、超大屏≥1200px），每个模块可通过 “类名” 指定在不同断点下的列数（如col-xs-12 col-md-6 col-lg-4表示 “移动端占 12 列、平板占 6 列、PC 占 4 列”）。
• 核心优势：
  • 开发效率极高，前端无需手动写栅格逻辑，直接调用框架类名即可；
  • 兼容性强（支持主流浏览器），设计稿只需按 Bootstrap 的断点和列数规则绘制，即可无缝对接开发。
• 适用场景：
  • 快速迭代的项目（如创业公司官网、小型电商网站、活动 H5）；
  • 非定制化需求的标准化页面（如企业展示站、博客、简单的工具类网页）；
  • 团队中 “设计师与前端均熟悉 Bootstrap” 的协作场景。

2. Ant Design 栅格系统（24 列，中后台首选）

• 所属框架：Ant Design（阿里推出的企业级 UI 框架，常用于中后台系统、B 端产品）。
• 核心规则：基于 24 列栅格，支持 “灵活断点配置”（默认包含 xs/sm/md/lg/xl/xxl6 个断点，可自定义尺寸），模块通过 “Row（行）” 和 “Col（列）” 组件组合，支持 “栅格偏移”（如offset={2}表示模块向右偏移 2 列）、“栅格排序”（调整模块在水平方向的顺序）。
• 核心优势：
  • 专为 B 端产品设计，支持 “复杂表单、数据表格、多模块嵌套” 的高精度排版；
  • 与 Ant Design 的组件库（按钮、卡片、输入框等）无缝适配，设计风格统一，减少 “组件与栅格冲突” 的问题。
• 适用场景：
  • 企业级后台管理系统（如电商后台、CRM 客户管理系统、OA 办公系统）；
  • B 端工具类产品（如设计协作平台、项目管理软件、数据分析工具）；
  • 需 “高度定制化响应式” 的复杂页面（如多角色权限的后台页面，不同角色看到的模块列数不同）。

3. Tailwind CSS 栅格系统（12 列，灵活定制）

• 所属框架：Tailwind CSS（ utility-first 类型的 CSS 框架，支持高度定制化）。
• 核心规则：默认 12 列栅格，支持 “自定义列数、断点、间距”（如可将列数改为 10 列，或自定义断点为 “移动端 < 360px、平板≥768px”），模块通过 “grid-cols-{n}”“col-span-{n}” 等工具类控制宽度（如grid-cols-12 col-span-8表示 “父容器为 12 列，当前模块占 8 列”）。
• 核心优势：
  • 无固定风格限制，设计师可完全自定义栅格参数（列数、间距、边距、断点），适合 “差异化设计” 需求；
  • 支持 “非对称栅格”（如某一行的列数与其他行不同），比 Bootstrap 更灵活，能满足创意性排版需求。
• 适用场景：
  • 定制化程度高的品牌网页（如独立设计师作品集、小众品牌官网、创意活动专题页）；
  • 不希望受框架 “固定风格” 限制的项目（如设计师想突破标准化排版，做不规则但有序的布局）；
  • 前端熟悉 Tailwind CSS、追求 “高效定制” 的团队。

三、垂直领域专用栅格系统（特定场景适配）

1. 印刷出版类栅格（如书籍、杂志网页化）

• 核心规则：基于 “基线网格（Baseline Grid）”—— 不仅有垂直列，还通过 “水平基线” 控制文本行高、段落间距，确保 “文本对齐”（如不同模块的文本 baseline 保持一致），列数通常为 2-4 列（模拟印刷品的 “多栏排版”）。
• 核心优势：还原印刷品的 “优雅排版质感”，提升长文本的阅读体验（避免 “文本行不对齐导致的视觉混乱”）。
• 适用场景：在线杂志、电子书、长文章阅读平台（如 Medium、豆瓣阅读的网页版）、品牌期刊网页版。

2. 电商专用栅格（商品排版优化）

• 核心规则：通常基于 12 列 / 24 列，额外增加 “商品卡片适配规则”—— 如 “商品卡片宽度 = 列宽 ×n + 间距 ×(n-1)”（确保卡片无间隙对齐），预设 “商品列表页” 的常用组合（如 “每行 3 个卡片 = 4 列 / 个”“每行 4 个卡片 = 3 列 / 个”“每行 6 个卡片 = 2 列 / 个”）。
• 核心优势：避免 “商品卡片尺寸不一致、间距混乱” 的问题，适配电商 “批量上传商品、自动排版” 的需求（如通过 CMS 系统按栅格规则自动生成商品列表）。
• 适用场景：电商平台的 “商品列表页”“分类页”“活动专题页（如 618 / 双 11 的商品会场）”。

四、栅格系统选择建议

1. 按项目复杂度选：
   • 简单页面（移动端、轻量内容）→ 6 列栅格；
   • 常规网页（大多数场景）→ 12 列栅格；
   • 复杂页面（数据密集、大尺寸屏幕）→ 24 列栅格。
2. 按开发框架选：
   • 用 Bootstrap 开发→ 12 列 Bootstrap 栅格；
   • 做 B 端后台（用 Ant Design）→ 24 列 Ant Design 栅格；
   • 高度定制化需求（用 Tailwind CSS）→ 自定义 12/24 列 Tailwind 栅格。
3. 按垂直领域选：
   • 长文本阅读（在线杂志）→ 印刷出版类栅格；
   • 电商商品排版→ 电商专用栅格。