CSS Grid使用minmax()时子元素无法占满网格容器问题排查

该现象不是minmax()函数工作异常，属于CSS Grid布局规则下的正常表现，核心成因是对Grid轨道计算逻辑、网格项尺寸作用边界的认知偏差。 #

• Grid轨道（行/列）尺寸计算独立于网格项自身尺寸
  你给网格容器#outer设置了固定宽高700px，浏览器会优先按照grid-template-columns、grid-template-rows定义的规则分配轨道空间：代入--seemoresz:100px计算后，两列规则为minmax(600px,700px)、minmax(0,100px)，两行规则为minmax(0,100px)、minmax(600px,700px)。由于容器总尺寸刚好等于各轨道最大值之和，最终轨道尺寸固定为：第一列宽600px、第二列宽100px，第一行高100px、第二行高600px，四个轨道拼接后刚好填满整个容器，整个计算过程不会因为网格项设置了width:0/height:0就重新收缩轨道。
• 给.hide设置的宽高为0仅作用于元素自身盒模型，不会释放占据的网格单元格
  四个子元素按照Grid默认自动放置规则，依次填充四个单元格：第1个.hide占(行1,列1)、第2个.hide占(行1,列2)、.show占(行2,列1)、第4个.hide占(行2,列2)。哪怕.hide元素自身宽高被设为0，它所占据的三个网格单元格的预留空间依然存在，不会自动让渡给其他网格项，因此.show只能在自身分配到的600px600px单元格范围内渲染，自然无法占满整个700px700px的容器。

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --seemoresz: 100px;
}

#outer {
  display: grid;
  grid-template-columns: minmax(calc(700px - var(--seemoresz)), 700px) minmax(0px, var(--seemoresz));
  grid-template-rows: minmax(0px, var(--seemoresz)) minmax(calc(700px - var(--seemoresz)), 700px);
  width: 700px;
  height: 700px;
  overflow: hidden;
  background-color: aqua;
}

.hide {
  width: 0;
  height: 0;
}

<div id="outer">
  <div class="hide">
    hide this
  </div>
  <div class="hide">
    hide this
  </div>
  <div class="show">
    show this
  </div>
  <div class="hide">
    hide this
  </div>
</div>

• 方案1：需要隐藏元素完全不占布局空间时，将.hide的样式改为display: none
  该设置会让Grid在计算轨道时直接忽略.hide元素，仅存的.show作为唯一网格项，会触发minmax()的最大值规则，让所有轨道扩张到700px最大值，最终填满整个容器。

  .hide {
    display: none;
  }
  

• 方案2：需要保留.hide元素在DOM流中时，显式指定.show跨所有网格轨道
  该设置会让.show覆盖全部2行2列的网格区域，视觉上占满整个容器，注意此时其他.hide元素占据的轨道空间依然存在，只是被上层的.show覆盖。

  .show {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
  }
  

内容的提问来源于stack exchange，提问作者Bảo Anh Bùi Nguyễn