如何使用CSS Grid实现内容垂直拉伸？Jeopardy游戏布局问题

问题原因&解决方案 #

你遇到的两个问题核心都是网格轨道规则缺失，修改方案如下：

1. 你认为.question-block的grid-row: 1/-1未生效属于误解：该属性实际已经生效，已让每个分类列占满body网格的全部5行高度，你看到的"未铺满"是因为.question-block内部的元素没有按高度等分容器。
2. 给.question-block添加display: grid后出现内容重叠，是因为你只声明了它为网格容器，没有定义内部的行轨道规则，无法正确分配5个内部元素（1个分类+4道题）的高度。

修复代码

仅需要修改两处CSS规则即可：

body {
    display: grid;
    /* 用fr替代百分比，避免边框/内边距导致的宽度溢出问题 */
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(5, 1fr);
    height: 100vh;
    /* 兜底清除默认边距 */
    margin: 0;
}

.question-block {
    display: grid;
    /* 内部定义5行，每行等分容器高度，刚好匹配1个分类+4道题的结构 */
    grid-template-rows: repeat(5, 1fr);
    grid-row: 1/-1;
}

修改后每个分类列会垂直铺满视口，内部的分类栏和4道题各占20%高度，不会出现重叠问题。

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