求助：如何用CSS Grid实现列重叠行并占满高度的布局

目标布局是红色内容区域（overlay）跨顶部header和右侧区域，占据右侧列全部高度，覆盖在原有元素上方。

问题分析 #

你当前代码里grid-row: header-start / content-end未正确跨两行，原因是grid-template-areas定义的行结构中，content属于第二行、header属于第一行，需明确行的起始/结束线来实现跨区域。

修改后的代码 #

CSS代码

body {
  margin: 40px;
}

.sidebar {
  grid-area: sidebar;
}

.header {
  grid-area: header;
}

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 120px 1fr; /* 右侧列自适应剩余宽度 */
  grid-template-rows: auto auto; /* 两行高度自适应内容 */
  grid-template-areas:
    "header header" 
    "sidebar content";
  background-color: #fff;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

.header {
  background-color: #999;
}

.overlay {
  background-color: red;
  z-index: 10;
  grid-column: 2 / 3; /* 占据右侧第二列 */
  grid-row: 1 / 3; /* 从第1行线到第3行线，跨两行 */
  border-radius: 5px;
  padding: 20px;
  color: #fff;
  font-size: 150%;
}

HTML代码

<div class="wrapper">
  <div class="box header">Header</div>
  <div class="box sidebar">Sidebar</div>
  <div class="overlay">Content</div>
</div>

关键修改说明 #

• 调整grid-template-columns为120px 1fr，让右侧列自适应剩余宽度，布局更灵活
• 明确grid-template-rows为两行，方便用行线定位overlay
• 用grid-column: 2 / 3和grid-row: 1 / 3直接定位overlay，确保它跨两行占据右侧整列
• 给overlay补充基础样式，与其他box视觉统一

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