布局网格计算器（栏宽、栏距、8pt 网格）

输入总宽度、栏数、栏距和左右边距，即可得到单栏宽度以及任意连续多栏的宽度。可用于搭建网页的 12 栏网格，或以毫米划分印刷页面。

使用方法

1. 在“单位”中选择 px 或 mm，然后从“宽度预设”中选择，或直接输入“总宽度”。
2. 输入“栏数”“栏距”和“边距”。左右边距不同时，把“左右边距”切换为“左右分别设置”。
3. 查看“栏宽”和“跨栏宽度”表，并通过徽章确认是否对齐“网格单位”所选的网格。若未对齐，可试用提示中给出的总宽度。
4. 打开“比较三个断点”可同时查看三种宽度，按“复制 CSS”获取代码。

计算方式与说明

• 栏宽 = (总宽度 − 左边距 − 右边距 − 栏距 × (栏数 − 1)) ÷ 栏数。n 栏的宽度 = 栏宽 × n + 栏距 × (n − 1)。
• 设置“内容最大宽度”后，总宽度更大时内容保持该宽度，其余部分平分给两侧边距。
• mm 模式下网格单位为点：1 pt = 0.3528 mm，96 dpi 时 1 mm = 3.78 px。
• 输入值保存在本设备的浏览器中。

常见问题

1200 px 的 12 栏网格栏宽是多少？

栏距 24 px、无边距时，(1200 − 24 × 11) ÷ 12 = 78 px。栏距改为 32 px 则为 70.67 px。

栏宽不在 8 px 网格上怎么办？

提示会给出最接近的倍数和对应的总宽度：内容宽度 1224 px 时，78 px 的栏变为 80 px。稍微调整栏距或边距也可以。

A4 页面应该分几栏？

没有唯一答案。文字为主用 2 到 3 栏；图片和表格混排时 6 栏或 12 栏更容易组合。输入 A4 210 mm、边距 15 mm、栏距 4 mm 即可比较。

复制的 CSS 怎么用？

.container 设置内容宽度和左右内边距，.grid 设置栏数和间距。跨多栏的元素写成 grid-column: span 4。mm 模式下代码还包含用于打印的 @page 边距。