CSS Grid布局问题：sidebar无法填充指定多行区域

你的问题出在全局固定高度设置上——你给.grid-container div加了height: 200px，这直接锁死了所有网格子元素的高度。哪怕你用grid-row: 1 / 5让sidebar跨4行，它的高度还是被限制在200px，自然看不出跨行效果。

而你测试grid-row: 3有效，是因为这个属性只是改变元素的行位置，不影响高度，所以你能看到它移到第三行，但高度还是200px。

修复方案 #

只需要两个调整：

• 移除全局的固定height设置（或者改成min-height: 200px，根据你的布局需求调整）
• 给网格容器设置一个明确的高度（比如占满视口），让1fr的行高生效

修改后的CSS代码：

.grid-container {
  display: grid;
  grid-template: 1fr 1fr 1fr 1fr / 1fr 1fr 1fr 1fr;
  height: 100vh; /* 让容器占满整个视口高度，确保行高有实际意义 */
}

.grid-container div {
  padding: 15px;
  /* 去掉固定height:200px，让元素高度随网格行自动拉伸 */
}

.sidebar {
  background-color: #0ea5e9;
  grid-row: 1 / 5;
}

.header {
  background-color: red;
  grid-column: 2 / 5;
}

这样调整后，sidebar就会自动拉伸填充第1到第4行的全部高度，实现你想要的单列跨多行效果。

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