栅格布局是将页面横向划分为若干列的结构化设计系统。12列是最流行的选择，因为12可以被2、3、4、6整除，提供了极大的布局灵活性。例如：2列各占6格、3列各占4格、4列各占3格等。Bootstrap、Ant Design等主流框架均采用12列栅格系统。8列和16列系统也有使用（如Sketch设计工具默认8列），但12列的公约数最多，适应性最强。

列间距的选择取决于设计风格和内容密度：
• 紧凑布局：8px-16px，适合仪表盘、数据密集页面
• 标准布局：20px-30px，Bootstrap默认30px（每边15px padding），适合大多数网站
• 宽松布局：40px-60px，适合高端品牌展示、作品集
移动端通常使用16px-20px的间距。CSS Grid的gap属性和Flexbox的gap属性都能方便地设置列间距。

CSS Grid是二维布局系统，同时控制行和列，使用grid-template-columns定义列结构，gap定义间距，非常适合整体页面栅格。
Flexbox是一维布局，使用flex-basis和gap（或margin）实现栅格效果，适合组件内部布局。
现代前端开发中，两者常结合使用：外层页面结构用CSS Grid，组件内部用Flexbox。本计算器计算出的数值可同时适用于两种方式。

固定宽度栅格：容器宽度固定（如1140px），列宽和间距使用px。适合需要精确控制的设计，Bootstrap的.container即采用此方式。
流体栅格：使用百分比或fr单位，列宽随视口变化。适合响应式设计，CSS Grid的1fr和百分比列宽都属于此类。
实际项目中，常采用混合策略：容器设置max-width限制最大宽度，内部使用百分比列宽，确保在大屏和小屏都有良好体验。

核心公式非常简单：
容器宽度 = 列数 × 列宽 + (列数 - 1) × 间距
由此可推导：
• 列宽 = (容器宽度 - (列数-1) × 间距) ÷ 列数
• 间距 = (容器宽度 - 列数 × 列宽) ÷ (列数-1)
注意：当列数为1时，间距为0（没有相邻列）。使用CSS Grid时，gap在单列情况下不会产生额外空间。

Bootstrap 5使用12列栅格，默认参数如下：
• 列间距：30px（每列左右各15px padding，通过row的负margin抵消边缘）
• 容器断点：sm=540px, md=720px, lg=960px, xl=1140px, xxl=1320px
• 响应式：使用.col-md-6等类名在不同断点切换列宽
Bootstrap 5已支持CSS Grid（通过.grid类），但传统的flexbox栅格（.row > .col-*）仍是主流用法。

• px → rem：除以根字体大小（通常16px）。例如67.5px ÷ 16 = 4.22rem
• px → 百分比：列宽 ÷ 容器宽度 × 100%。例如67.5px ÷ 1140px × 100% = 5.92%
使用rem单位可实现更好的无障碍访问（尊重用户字体设置），使用百分比可实现流体栅格。本计算器在结果中同时提供px和rem参考值。