HTML Grid布局因<details>元素异常：展开时上方<p>元素被拉长

问题根源 #

你给.ScoreItem设置了grid-template-rows: 1fr 1fr，这会让Grid容器的两行强制平分总高度。当<details>展开后，第二行内容高度大幅增加，第一行的1fr会被强行拉到和第二行相同的高度，直接导致上方两个<p>元素被向下拉伸变形。

修复方案 #

把Grid第一行的高度设置为auto（仅占用自身内容所需高度），第二行用1fr填充剩余空间：

.ScoreItem {
    display: grid;
    grid-template-rows: auto 1fr; /* 核心修改 */
    grid-template-columns: 1fr 1fr;
    grid-gap: 5px;
}

效果说明 #

修改后：

• 关闭<details>时，第一行保持正常内容高度，和原显示效果一致
• 展开<details>时，第一行仅包裹自身内容，第二行随展开内容自动扩展高度，不再影响上方元素

附关闭状态截图：
展开状态截图：

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