使用minmax(100px,1fr)时CSS Grid第三行为何不随内容扩展？

核心原因：固定容器高度 + grid-template-rows的轨道分配逻辑 #

你遇到的问题本质是对grid-template-rows: repeat(auto-fit, minmax(100px, 1fr))的作用逻辑和固定高度容器的限制理解有误：

1. auto-fit的作用逻辑
   auto-fit在repeat()中是用来生成尽可能多的填满容器的轨道（行），它的计算基础是容器的固定尺寸。你的容器高度固定为600px，minmax(100px, 1fr)的最小行高是100px，所以Grid会先计算：600px ÷ 100px = 6行，这6行刚好填满容器高度。但你有8个.box元素，Grid会强制创建8行，可容器没有额外高度可以分配，最终所有行的总高度被锁死在600px内，每行高度被压缩（或保持最小100px但总高度超出容器），导致内容溢出。

2. minmax(100px, 1fr)的分配逻辑
   这里的1fr是基于容器的总可用高度来分配的，完全和单元格内容无关。它的作用是把容器剩余的空间平均分给所有行，但因为容器高度固定，即使某个单元格内容再多，也不会让该行突破分配到的高度——Grid会优先保证所有行的总高度符合容器限制，而不是适应内容。

3. 为什么行不会自适应内容
   grid-template-rows定义的是显式轨道尺寸，这些尺寸是围绕容器空间设计的，而非内容。如果想要行高随内容自动扩展，你需要改用grid-auto-rows: minmax(100px, auto)，这个属性会让自动生成的行以100px为最小高度，当内容超过100px时自动扩展高度。

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