网格布局中figure元素出现额外间隙，致元素错位原因待查

嘿，我来帮你拆解一下这个问题——虽然你已经通过固定#wrapper尺寸解决了问题，但搞清楚根源确实能避免以后踩同样的坑。结合你描述的情况，这个额外垂直间隙大概率来自这几个常见的Grid布局陷阱：

• Figure元素的浏览器默认样式残留：
  虽然你提到已经取消了元素的margin和padding，但很多浏览器对<figure>标签有默认的外边距（比如Chrome里是margin: 1em 40px），而且垂直方向的margin在Grid布局里不会像普通文档流那样折叠，会直接导致Grid项的高度被撑开。你可以打开浏览器开发者工具，选中figure元素，查看「Computed」面板里的margin值，确认是否真的完全清零。如果有残留，直接添加：

  figure { margin: 0; padding: 0; }
  

  就能彻底清除默认样式的影响。

• 内联元素的基线对齐间隙：
  如果你的figure里包含<img>这类内联元素，默认的vertical-align: baseline属性会在图片底部留下几像素的隐性间隙，这会让figure的实际高度比图片本身高一点，进而导致Grid轨道被额外撑开。解决方法很简单：给img设置display: block，或者vertical-align: top/middle，就能消除这个不起眼的间隙。

• Grid轨道的自动计算逻辑：
  当你没有给#wrapper固定尺寸时，Grid容器会根据子项的内容自动计算轨道大小。如果figure的内容（比如图片本身的高度超出预期，或者包含其他隐藏元素）有额外高度，Grid会自动拉伸轨道来容纳这些内容，从而出现你看到的额外垂直空间。而当你固定#wrapper的高度为410px后，Grid会强制将轨道高度分配为410px / 行数，直接限制了轨道的最大高度，自然就把那些额外间隙“挤掉”了。

• 隐式Grid轨道的意外创建：
  如果你没有显式定义grid-template-rows，当某个Grid项的内容高度超过了Grid自动计算的轨道高度时，浏览器会创建一个隐式的轨道来容纳溢出的内容，这也会表现为额外的垂直间隙。固定#wrapper尺寸后，轨道高度被强制约束，溢出的内容会被裁剪或压缩，隐式轨道就不会被创建了。

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