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

布局基础术语

栅格布局（Grid Layout）

栅格布局是一种将页面内容区域划分为等宽或不等宽的列（Column）和行（Row）的二维布局系统。通过列和行的组合，开发者可以精确控制元素在页面中的位置和大小。栅格布局的核心思想是「内容对齐到网格」，它起源于平面设计中的网格系统（Grid System），后被引入 Web 前端开发，成为响应式设计的基石。常见的栅格系统包括 Bootstrap 的 12 列系统、Material Design 的 4 列基准系统以及 CSS Grid 原生的栅格能力。

列（Column）

列是栅格系统中的垂直划分单元。一个栅格容器被等分为若干列，每列占据容器总宽度的一个比例。例如在 12 列系统中，每列占据容器宽度的 1/12（约 8.33%）。列的宽度可以通过公式精确计算：列宽 =（容器宽度 - 所有间距总和）÷ 列数。在 CSS Grid 中，列的定义通过 grid-template-columns 属性实现；在 Flexbox 中，则通过 flex-basis 或 width 属性设定。

间距（Gutter）

间距是相邻两列之间的空白区域，用于在视觉上分隔不同的内容块。间距的存在避免了内容紧贴在一起，提升了可读性和视觉舒适度。在计算栅格时，间距是最重要的参数之一，因为它会占用容器的有效宽度。间距总占用 = 间距值 ×（列数 - 1），然后从容器总宽度中减去这个值，剩余部分才能均分给各列。Bootstrap 5 使用 CSS Gap 属性或 margin/padding 组合来实现间距。

容器（Container）

容器是包裹所有栅格内容的最外层元素，它定义了栅格系统的总宽度边界。容器宽度决定了整个布局的水平跨度。常见的容器宽度设定包括：1200px（Bootstrap 大屏断点）、1140px（Bootstrap 内容区宽度）、100%（全宽流体容器）。在响应式设计中，容器宽度通常会随屏幕尺寸变化，从固定宽度变为百分比宽度，以适应不同设备的显示需求。

栅格类型术语

固定栅格（Fixed Grid）

固定栅格是指列宽和间距使用固定像素值（px）定义的栅格系统。无论屏幕宽度如何变化，每列的宽度始终保持不变。固定栅格适用于需要精确控制布局尺寸的场景，例如邮件模板、打印样式或特定分辨率的展示页面。固定栅格的缺点是无法自动适应不同屏幕尺寸，需要为每个断点单独定义参数。

流体栅格（Fluid Grid）

流体栅格是指列宽使用百分比（%）定义的栅格系统，列宽会随容器宽度的变化而自动缩放。流体栅格是响应式设计的核心技术，它让布局能够自然地适应从手机到桌面显示器的各种屏幕尺寸。在流体栅格中，每列的百分比宽度公式为：列宽% =（容器宽度 - 间距总和）÷ 容器宽度 × 100%。Bootstrap 的栅格系统就是典型的流体栅格实现。

12 列栅格系统

12 列栅格系统是 Web 开发中最广泛使用的栅格划分方案，被 Bootstrap、Foundation 等主流 CSS 框架采用。选择 12 列的原因在于 12 是一个高度合数（Highly Composite Number），它可以被 1、2、3、4、6、12 整除，意味着可以轻松实现 1/2、1/3、1/4、1/6 等常见比例的列布局。这种灵活性使得 12 列系统能够覆盖绝大多数页面布局需求，从简单的两栏到复杂的多栏混排都能轻松应对。

断点（Breakpoint）

断点是响应式设计中定义不同屏幕宽度阈值的概念。当屏幕宽度达到某个断点时，布局会切换到对应的栅格配置。例如 Bootstrap 5 定义了五个断点：xs（0px+）、sm（576px+）、md（768px+）、lg（992px+）、xl（1200px+）和 xxl（1400px+）。在每个断点下，栅格的列数、间距和容器宽度可能不同，以确保内容在各种设备上都能获得最佳的阅读体验。

技术实现术语

CSS Grid

CSS Grid 是 CSS 原生的二维布局模块，可以直接在 CSS 中定义行和列的尺寸，无需借助任何框架。通过 grid-template-columns 属性，开发者可以使用 repeat() 函数和 fr 单位来定义栅格。CSS Grid 的优势在于它能够同时控制行和列，支持元素跨行跨列放置，并且可以通过 gap 属性直接设置间距，无需额外的 margin 计算。现代浏览器对 CSS Grid 的支持已经非常完善。

Flexbox 栅格

Flexbox 栅格是使用 CSS Flexbox 布局实现的栅格系统。通过将容器设为 display: flex，子元素设为固定百分比宽度或 flex-basis，可以实现列式布局。Flexbox 栅格的优势在于它是一维布局模型，代码更直观，适合简单的列式排布。Bootstrap 5 的栅格系统底层就是基于 Flexbox 实现的。在 Flexbox 栅格中，间距通常通过 margin 或 padding 来控制。

rem 单位

rem（Root EM）是一种相对于根元素（html）字体大小的 CSS 单位。默认情况下 1rem = 16px（浏览器默认根字体大小）。使用 rem 作为栅格宽度单位的好处是：当用户调整浏览器默认字体大小时，布局会相应缩放，提升了无障碍访问体验。在使用栅格计算器时，如果输出 rem 值，需要确保项目的根字体大小设置与计算器中的设定一致。