如何配置grid-template-rows仅使中间行高度为40px？

你的问题出在重复声明grid-template-rows，且未对footer的行高度做单独控制：当前代码里两次写grid-template-rows: 100px，最终仅生效一次，只定义了第一行（header）的高度，后续所有行（包括footer）都会使用grid-auto-rows: 40px的设置，这就是footer没渲染成100px的原因。

只需调整CSS即可实现需求：

• 移除重复的grid-template-rows声明，保留一次定义首行高度
• 强制footer定位到网格最后一行，并设置固定高度

修改后的完整CSS代码：

.container {
  display: grid;
  grid-template-rows: 100px; /* 首行header高度 */
  grid-auto-rows: 40px; /* 中间记录行自动使用40px高度 */
  grid-gap: 5px;
  grid-template-columns: auto;
}
header {
  background: yellow;
}
record {
  background: cyan;
}
footer {
  background: green;
  color: white;
  grid-row: -1; /* 固定在最后一行 */
  height: 100px; /* 设置footer高度为100px */
}

HTML代码无需修改，这样header和footer会保持100px高度，中间所有record行自动使用40px高度，且footer不会被中间行的高度规则影响。

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