UI 设计栅格化计算UI Grid Calculator
根据页面总宽度、栅格数量和边距，找出所有栅格宽度与间距均为整数的布局方案，并按真实比例预览。Find integer column widths and gutters from a page width, column count and margins, with a proportional layout preview.
从一组清晰的栅格开始
输入页面尺寸，或选择左侧预设。所有结果均为整数像素，可直接用于设计规范。
UI 设计栅格化计算使用指南UI Grid Calculator: guide
根据页面宽度、栅格列数和左右边距，计算列宽与列间距均为整数的 UI 布局方案，并按真实比例预览栅格。Find integer column widths and gutters from a page width, column count and margins, with a proportional layout preview.
- 输入页面总宽度、列数与左右边距。Enter page width, columns and left/right margins.
- 选择满足条件的整数方案，查看列宽、间距和比例预览。Choose a valid integer layout and inspect its preview.
为什么有时没有栅格方案？Why are there no matching layouts?
页面宽度、列数、边距与整数间距条件可能无法同时满足。请调整宽度、边距或列数后重新计算。The width, margins, columns and integer gutter requirements may conflict. Adjust the inputs and calculate again.
免费使用，无需注册。工具输入在浏览器本地处理；网站访问统计不包含工具输入内容。Free to use, no registration. Tool input is processed locally in your browser and is not included in website analytics.