栅格布局计算器 - 列宽/间距/容器计算

栅格布局（Grid Layout）是一种将页面内容区域划分为等宽或不等宽的列和行的二维布局系统。它的核心思想是将页面划分为一个不可见的网格，所有元素都对齐到这个网格上，从而保证布局的一致性和精确性。

在前端开发中，栅格布局的作用主要体现在三个方面：一是提供统一的布局规范，确保不同页面之间的视觉一致性；二是简化响应式设计，通过切换不同断点的栅格参数来适配各种屏幕尺寸；三是提高开发效率，开发者无需逐个像素地计算元素位置，而是基于栅格系统快速搭建布局。目前主流的 CSS 框架（如 Bootstrap、Ant Design、Tailwind CSS）都采用栅格系统作为布局基础。

12 列栅格系统被广泛采用的根本原因在于 12 是一个「高度合数」（Highly Composite Number），它可以被 1、2、3、4、6、12 这六个数字整除。这意味着在一个 12 列的栅格中，你可以轻松实现以下常见布局比例：

· 1/2（6 列）— 两栏等分布局
· 1/3（4 列）和 2/3（8 列）— 三栏不等分布局
· 1/4（3 列）和 3/4（9 列）— 四栏等分或侧边栏布局
· 1/6（2 列）— 六栏窄列布局
· 1/12（1 列）— 最小粒度的布局单元

这种高度的灵活性使得 12 列系统能够覆盖绝大多数页面布局需求。相比之下，10 列只能被 1、2、5、10 整除，灵活性远不如 12 列。虽然也有 16 列和 24 列系统（如 Ant Design），但它们更多用于需要更精细控制的复杂后台界面。

Gutter（间距）的选择取决于内容密度、屏幕尺寸和设计风格。以下是常见场景的推荐值：

· 8px（紧凑间距）：适用于数据密集型后台界面、表格密集排列的场景，如 Dashboard 数据卡片
· 16px（标准间距）：Bootstrap 5 的 gutter-3 级别，适用于一般内容页面、博客文章列表
· 24px（默认间距）：Bootstrap 5 的默认 gutter 值（gutter-4），适用于大多数 Web 应用的标准布局
· 32px（宽松间距）：Bootstrap 5 的 gutter-5 级别，适用于营销页面、品牌展示等需要大量留白的场景
· 48px-64px（超大间距）：适用于着陆页（Landing Page）、大屏展示等视觉冲击力要求高的场景

一般来说，桌面端建议使用 24px-32px，移动端建议使用 16px-24px，以确保在小屏幕上内容不会过于拥挤。

CSS Grid 和 Flexbox 都能实现栅格布局，但它们的设计理念和适用场景有本质区别：

CSS Grid（二维布局）：同时控制行和列，通过 grid-template-columns 和 grid-template-rows 定义网格结构。适合复杂的二维布局，如整个页面的宏观布局、仪表盘多区域排布。间距通过 gap 属性设置，无需额外 margin 计算。代码更简洁，一个 grid 容器就能定义整个网格。

Flexbox（一维布局）：控制一个方向上的排列（行或列），通过 flex-basis 或 width 设定子元素宽度。适合简单的一维列式布局，如导航栏、卡片列表。间距通常通过 margin 或 padding 控制，计算稍复杂。

选择建议：如果只是简单的等宽列排布（如 3 列卡片网格），两者都可以；如果需要跨行跨列的复杂布局，优先选择 CSS Grid；如果追求最大兼容性（需要支持 IE11），Flexbox 是更安全的选择。实际项目中，很多开发者会 Grid 用于页面宏观布局，Flexbox 用于组件内部排列。

固定栅格使用固定像素值定义列宽和间距，布局尺寸不会随容器宽度变化。优点是精确可控，在目标分辨率下效果完美；缺点是无法自动适应不同屏幕尺寸，需要为每个断点单独定义参数。固定栅格适用于邮件模板、特定分辨率的展示页面、打印样式等场景。

流体栅格使用百分比定义列宽，布局会随容器宽度自动缩放。优点是天然支持响应式设计，一套参数适配所有屏幕尺寸；缺点是在极端宽度下可能出现列宽过窄或过宽的问题。流体栅格是现代 Web 开发的主流选择，适用于绝大多数需要响应式的网站和应用。

实际项目中，推荐使用「流体栅格 + 断点控制」的组合方案：整体采用百分比流体布局，同时通过媒体查询在关键断点处调整列数和间距，确保在各种设备上都有最佳表现。

Bootstrap 5 的栅格系统基于 Flexbox 实现，核心默认参数如下：

· 列数：12 列
· 默认间距（Gutter）：24px（对应 gutter-4 类名），通过 CSS gap 属性实现
· 容器最大宽度：按断点分别为 540px（sm）、720px（md）、960px（lg）、1140px（xl）、1320px（xxl）
· 断点设置：xs=0、sm=576px、md=768px、lg=992px、xl=1200px、xxl=1400px
· 间距等级：gutter-0（0px）到 gutter-5（48px），步进 8px
· 列宽计算：每列宽度 =（容器宽度 - 间距总和）÷ 12

在 Bootstrap 5 中，间距通过 CSS 的 gap 属性实现（而非旧版的负 margin 方案），代码更简洁，也不再需要额外的 row/col-wrapper 来处理溢出问题。

px 转 rem：公式为 rem = px ÷ 根字体大小。默认根字体大小为 16px，所以 24px = 1.5rem，32px = 2rem。如果项目修改了根字体大小（如设为 14px），则需要相应调整换算基数。建议在项目中使用 CSS 自定义属性统一管理根字体大小，避免硬编码。

px 转百分比：公式为 % =（目标宽度 ÷ 父容器宽度）× 100%。在栅格计算中，每列的百分比 =（容器宽度 - 间距总和）÷ 列数 ÷ 容器宽度 × 100%。例如容器 1200px、24px 间距、12 列，每列百分比 =（1200 - 24×11）÷ 12 ÷ 1200 × 100% ≈ 7.83%。

注意事项：1）rem 计算时注意浏览器的最小字体限制（通常 12px），极端情况下 rem 值可能不精确；2）百分比布局中，间距如果使用固定 px 值会导致在不同容器宽度下列宽比例变化，建议间距也使用百分比或 CSS gap 实现自适应。

当容器宽度不能被列数整除，或者间距值导致剩余空间无法均分时，计算结果就会出现小数。例如容器 1200px、24px 间距、7 列，每列宽度 =（1200 - 24×6）÷ 7 ≈ 149.142857px，这是一个无限循环小数。

在实际 CSS 中，浏览器的渲染引擎会处理亚像素（Sub-pixel）问题。现代浏览器通常能正确处理小数像素值，不会出现明显的布局偏差。建议在 CSS 中保留 4-6 位小数以确保精度，例如 width: 149.142857px 或 width: calc((100% - 144px) / 7)。如果追求像素完美的对齐，可以考虑使用 CSS Grid 的 fr 单位，它会自动处理剩余空间的分配。

本计算器是通用的栅格参数计算工具，支持任意列数、间距和容器宽度的组合，因此它可以适配以下所有主流 CSS 框架的栅格系统：

· Bootstrap 5：12 列、24px 间距、1140px 容器
· Bootstrap 4：12 列、30px 间距（gutter）、1140px 容器
· Tailwind CSS：12 列、间距通过 gap-x/gap-y 类设定
· Material Design：4/8/12 列基准、16px 或 24px 间距
· Ant Design：24 列、间距通过 Row/Col 组件的 gutter 属性设定
· Foundation：12 列、30px 间距
· Bulma：12 列、间距通过 columns is-gapless 控制

您只需在计算器中输入对应框架的参数即可获得精确的列宽计算结果。

可以。Tailwind CSS 的栅格系统基于 CSS Grid 和 Flexbox 实现，支持通过 gap 属性设置间距，通过 grid-cols-* 或 flex 定义列数。您可以将计算器的输出结果转换为 Tailwind 的配置方式：

1）将列宽百分比值填入 Tailwind 的自定义宽度配置（extend.width）
2）将间距值转换为 Tailwind 的 gap 配置（extend.gap）
3）如果使用 Grid 布局，将列宽用于 grid-template-columns 的自定义值

例如，如果计算结果显示每列宽度为 7.83%，间距为 24px，您可以在 tailwind.config.js 中配置对应的自定义宽度和间距类。Tailwind 的默认栅格是 12 列，与计算器的默认值一致。