使用calc实现CSS Grid子元素缩进 精准对齐父级网格列

问题根源 #

你的计算公式错误本质是两个维度的遗漏：

1. 子元素<p>的百分比宽度基准是父容器.storyblock__caption的内容宽度，也就是已经扣除了左右各12px内边距后的宽度，不是父级网格.storyblock的总宽度
2. 网格列的总间隙数是总列数-1，你之前的公式没有把间隙的分摊逻辑算对，导致缩进多列时误差累计

正确计算逻辑 #

先明确几个固定参数：

• 父级网格总列数 n = 4
• 父级网格列间隙 g = 12px
• .storyblock__caption 左右内边距 p = 12px
• 缩进列数 k（缩进1列对齐第2列时k=1，缩进2列对齐第3列时k=2）

最终margin-left的通用公式为：

margin-left: calc( k * (100% + 36px) / 4 - 12px );

这里的36px是2*p + g的固定值（2*12 +12=36），如果后续你修改了边距参数替换对应数值即可。

对应场景的代码修正 #

• 对齐第2列（缩进1列，k=1）：calc(25% - 3px) 和你原来的写法一致，可正常使用
• 对齐第3列（缩进2列，k=2）：calc(50% + 6px)，替换你原来错误的calc(50% - 6px)即可
• 对齐第4列（缩进3列，k=3）：calc(75% + 15px)

效果验证 #

以你设置的父级最大宽度375px为例：

• 每列实际宽度 = (375px - 3*12px) /4 = 84.75px
• 第3列左边缘距离页面左边缘 = 284.75px + 212px = 193.5px
• 修正后k=2的margin-left计算值：50%*(375-24)px +6px = 175.5px +6px =181.5px
• 加上.storyblock__caption的12px左内边距，总偏移为181.5+12=193.5px，完全对齐第3列左边缘

内容的提问来源于stack exchange，提问作者user1406440