CSS Grid布局中最后一项高度为何影响顶部网格项宽度？

这个问题是CSS Grid布局的固有计算规则导致的，核心逻辑如下：

• 网格轨道（列/行）的尺寸是全局统一计算的，不存在按行隔离计算的逻辑。你定义的4个auto宽度列，所有落在对应列上的网格项（无论在第几行）都会参与列宽计算，底部行的内容变化完全可以影响顶部项的宽度。
• 你观察到的宽度变化，直接触发点是垂直滚动条的显隐：
  当.card-4-content高度变化时，整个网格容器的总高度会随之改变：如果总高度超出浏览器视口高度，右侧会弹出系统默认的垂直滚动条，占用15-17px的水平可用宽度；如果总高度小于视口高度，滚动条隐藏，可用宽度相应增加。
• auto列宽的分配逻辑本身不是严格等比的：它会优先满足所有网格项的最小内容宽度要求，再把剩余可用空间分配给各个轨道。由于card1跨前两列、card2跨后两列，两者的内容渲染、边框计算存在极细微的宽度差，浏览器做像素取整时就会出现card1略微变宽、card2对应变窄的现象，和底部行高度本身没有直接关系，是高度变化触发的可用宽度改变导致的。

如果需要card1和card2始终保持等宽，不要用auto定义列，改用fr弹性单位按比例分配宽度即可，修改后的容器样式如下：

.container {
  display: grid;
  /* 4个等宽列，严格按1:1:1:1分配可用宽度 */
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 25px;
  grid-template-rows: 155px 160px auto auto;
  grid-template-areas: 
    "card-1 card-1 card-2 card-2"
    "card-1 card-1 card-2 card-2"
    "card-3 card-3 card-3 card-3"
    "card-4 card-4 card-4 card-4";
}

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