栅格宽度计算器

📖 工具介绍

栅格宽度计算器是一款面向前端工程师与界面设计师的布局辅助工具。无论是手写 CSS 还是基于 Bootstrap、Tailwind 等框架还原设计稿，都绕不开一个核心问题：在给定的容器宽度下，一列到底有多宽？一个跨三列的区块又该占多少像素？靠心算和取整总是差几像素，写到样式表里还会出现累计误差。本工具把栅格布局的几何关系彻底拆开：您只需填入容器宽度、总列数、列间距 gutter 以及左右外边距，工具立刻推导出内容区宽度、单列像素宽度以及含间距的槽位宽度，并把从 span 1 到 span N 的每一种跨度对应的像素宽度与占内容区百分比整理成一张表。其底层公式非常直接：先从容器宽度里扣除两侧外边距得到内容区，再在内容区里预留 (列数−1) 个列间距，把剩余宽度均分给每一列；而跨度 k 列的宽度等于 k 个单列加上 (k−1) 个间距。工具还会给出一条与列数成比例的可视化色条，让您一眼判断栅格是否均衡。所有计算在浏览器本地完成，无任何网络请求。

✨ 功能特点

• 四项参数自由组合：容器宽度、列数、列间距、左右外边距全部可配
• 精确公式推导：列宽与跨度宽度均按像素计算并保留两位小数
• 完整跨度表：列出 span 1 到 span N 的像素宽度与百分比
• 可视化色条：按真实列数渲染等宽色块，直观看出栅格节奏
• 边界校验：间距过大、外边距超界等非法组合会得到明确提示
• 一键复制结果：计算表可作为纯文本复制，直接粘贴进文档或样式表

📝 使用方式

1. 在容器宽度中填写目标版心的像素宽度，例如 1200
2. 在列数中填写总列数，常见为 12，也可改为 16 或 24
3. 在列间距中填写相邻两列之间的间隙，例如 20
4. 在左右外边距中填写容器两侧的留白，没有则填 0
5. 点击计算，右侧即出现摘要、色条与跨度宽度表，可一键复制

⚠️ 注意事项

• 数值合法性：所有参数必须为非负有效数字，非法输入会被拦截
• 列数下限：列数至少为 2，否则栅格没有意义
• 间距约束：当列间距之和超过内容区宽度时工具会提示无法放下
• 外边距约束：左右外边距之和不能超过容器宽度本身
• 本地计算：所有运算在浏览器内完成，不会上传任何数据