为何此CSS Grid未生成正确数量的行与列？

问题的核心是容器高度限制与网格间距（gap）的组合计算导致最后一行被挤压消失，具体拆解：

• 网格容器设置了height:100%，意味着容器高度是固定值（继承自父元素的高度，假设父元素有明确高度）。
• .grid8x8定义了8行网格，而grid-gap:1em会在每行之间添加间距，8行网格会产生7个行间距（行间距数量=行数-1）。
• grid-template-rows: repeat(8,1fr)的计算逻辑是：把容器高度减去所有行间距的总高度后，剩余空间平均分给8行。但当8个1fr的高度加上7个1em的间距总和超过容器的100%高度时，浏览器会自动压缩网格行的高度，最终导致最后一行的高度被挤压至0，所以在检查工具中只能看到7行有实际高度的网格行。

解决思路 #

• 移除height:100%，让容器根据网格内容和间距自动撑开高度，8行网格会正常显示；
• 使用grid-template-rows: repeat(8, minmax(0,1fr))，强制行高度最小为0，避免被完全挤压消失；
• 改用min-height:100%代替height:100%，给容器高度留出弹性空间。

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