为何CSS Grid第二行高度与存在固定高度项的第一行相同？

问题原因 #

这个现象是grid-template-rows: 1fr 1fr的配置规则直接导致的，逻辑如下：

1. 你没有给.container--1显式设置固定高度，网格容器的高度默认由内部内容决定
2. fr是网格布局的剩余空间分配单位，当容器高度为auto时，所有设置为1fr的行都会遵循等高分配规则：先计算每一个1fr行的最小高度（由该行内最高的网格项决定），之后所有1fr行的高度会统一等于这些最小高度的最大值，保证所有1fr行高度一致
3. 你的第一行1fr的最小高度是150px（来自.el--4的显式高度），第二行1fr的最小高度是行内文字的高度（远小于150px），所以两个1fr行的高度都会被拉到最大值150px，就出现了第二行和第一行等高的现象。

解决方法 #

如果希望第二行高度自适应自身内容高度，只要把行高配置改成grid-template-rows: auto auto即可：第一行高度由行内最高元素150px决定，第二行高度由自身内容高度决定，不会再和第一行等高。

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