632 像素放三列卡片，为什么每列正好 200

操作步骤

1. 打开CSS等分网格生成，恢复632px三列示例：列数3、示例行数2、列间距16、行间距12、最大宽度632。
2. 核对尺寸：两道列间距共32px，632减32剩600，再除以三列得到每列200px。预览应有六张卡片，每行三张。
3. 分别复制CSS和HTML到自己的样式表与页面。HTML使用jijie-grid类，CSS须包含display:grid及grid-template-columns，不能只复制尺寸说明。
4. 核对width:100%和max-width:632px：父容器足够宽时三列各200px；父容器收窄时列宽缩小，列数仍为三列。工具预览固定632px，手机在框内横向滚动。
5. 把列数改6、列间距改64、容器宽度改240，确认出现间距占满容器错误，旧预览和下载消失；恢复示例后再用。
6. 下载jijie-grid.css及jijie-grid.html或手动复制，分别保存样式和HTML片段。接入自己的页面后检查长文本、图片和小屏阅读。

跟着示例试一次

六条交接事项排为两行三列。公式：(632−(3−1)×16)÷3=200。行间距12px不参与列宽计算；示例行数只控制卡片数量，真实行高由内容和64px最小值决定。

.jijie-grid {
  display: grid;
  width: 100%;
  max-width: 632px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(64px, auto);
  column-gap: 16px;
  row-gap: 12px;
}

怎样确认结果正确

默认原生Grid计算应为200px 200px 200px，列间距16px，容器632px。再把列间距改0，三列各约210.6667px，总和回到632，允许子像素舍入。导出代码应使用当前参数，HTML有六张卡片。语义参考 https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/grid-template-columns 。

常见问题与边界

只支持1–6列、1–6示例行、0–64px间距、240–1600px最大宽度，仅整数。minmax(0,1fr)允许列缩小，不会自动为图片加响应式样式。没有跨行跨列、拖放、断点、自动填充或瀑布流，很窄的父容器需自行设计断点。HTML下载只是片段，不含完整文档头。参数仅本页内存计算，不上传、不自动保存；全站收藏不代表保存参数。