CSS inline-grid在布局开发工具中显示尺寸异常求助

核心原因 #

你使用了display: inline-grid，这个属性属于行内级网格容器，它的宽度表现和行内元素类似：即便你设置了width:400px，如果网格的实际内容宽度（由子项或默认列宽决定）小于400px，容器会自动收缩到适配内容的宽度，不会强制撑满你设置的width值。

另外你没有定义grid-template-columns，网格列默认是auto（由子项内容宽度决定），如果子项总宽度刚好是320px，容器就会显示这个宽度，而非你设置的400px。

解决办法 #

根据你的需求，有两种可行方案：

• 如果你不需要容器保持行内特性，直接把display: inline-grid改成display: grid。块级网格容器会严格遵循你设置的width:400px，不会因为内容宽度不足而收缩。
• 若必须保留inline-grid，显式定义网格列宽，比如添加grid-template-columns: 1fr（让单列撑满容器宽度），或者grid-template-columns: 400px（固定列宽匹配容器），这样容器就能保持400px宽度。
• 额外检查父元素是否设置了max-width、width等限制，确保父元素没有挤压容器的可用宽度。

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