栅格参数

栅格已计算。

预览与尺寸表

123456789101112
74.00px单列宽
888px可用列区
.layout-grid {
  max-width: 1200px;
  padding-inline: 24px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
}
/* 单列约 74px，固定交付时可使用 repeat(12, 74px) */

页面栅格规划

设置内容宽度、列数、左右边距与列间槽宽，计算页面栅格尺寸，查看布局预览和尺寸表，复制 CSS Grid 变量或保存参数，方便核对网页栅格设计。

整理：喜爱工具箱 · 更新于 。计算结果用于设计交付参考，实际页面还需结合断点、滚动条和容器 padding 核对。

继续使用：字号比例生成器 · 界面主题预览

使用说明

三步完成操作

  1. 01 · 输入页面约束

    设置内容宽度、列数、左右外边距和列间槽宽。

  2. 02 · 检查列宽

    公式会计算可用空间和单列宽；非正列宽会提示错误。

  3. 03 · 交付 CSS

    复制 CSS Grid 变量，也可保存 JSON 记录设计尺寸。

常见问题

使用前先了解这些

列宽公式是什么？

列宽 = (总宽 - 2×外边距 - (列数-1)×槽宽) / 列数。

为什么列宽可能不是整数？

响应式设计和 CSS Grid 常允许小数。交付固定稿时请和设计软件的小数策略保持一致。

外边距和页面 padding 是一回事吗？

这里的外边距指内容容器内部留白，可作为 CSS padding-inline 的参考。

它会生成完整页面吗？

不会。首版只做尺寸规划、预览和 CSS 片段，不扩展成页面搭建器。