Grid布局下第三个Div被挤压下移，响应式设置遇重叠问题求助

问题详情 #

• 布局结构：使用包含三个子元素的Grid容器，子元素分别为main-left-section、main-right-section、main-comment-section
• 核心问题：
  • 未设置main-right-section高度时，main-comment-section明明上方有空闲空间，却被挤到容器底部（main-left-section下方存在空白区域）
  • 给main-right-section设置100vh临时解决后，屏幕宽度≤1190px的响应式场景中，评论区会与右侧区域重叠
• 已尝试：调整元素高度、修改Grid基础属性，均未解决

相关代码 #

CSS #

.main-container {
  padding-top: var(--main-margin-top);
  display: grid;
  grid-template-columns: var(--video-width) var(--main-right-section-width);
  gap: var(--default-gap);
  justify-content: center;
}

@media screen and (max-width: 1190px) {
  .main-container {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
  }
}

HTML #

<div class="main-container"> 
  <div class="main-left-section"></div>
  <div class="main-right-section"></div>
  <div class="main-comment-section"></div>
</div>

解决方案 #

方案1：使用网格区域精确控制布局 #

通过grid-template-areas定义清晰的布局结构，让评论区占据左侧区域下方的空间，右侧区域单独占满整列高度：

.main-container {
  padding-top: var(--main-margin-top);
  display: grid;
  grid-template-columns: var(--video-width) var(--main-right-section-width);
  grid-template-areas: 
    "left right"
    "comment right";
  gap: var(--default-gap);
  justify-content: center;
}

.main-left-section {
  grid-area: left;
}

.main-right-section {
  grid-area: right;
}

.main-comment-section {
  grid-area: comment;
}

@media screen and (max-width: 1190px) {
  .main-container {
    grid-template-columns: 1fr;
    grid-template-areas: 
      "left"
      "right"
      "comment";
    grid-template-rows: auto auto auto; /* 自适应内容高度，避免固定行高导致重叠 */
  }
}

方案2：利用Grid自动流填充空白 #

如果不需要严格的区域命名，可通过grid-auto-flow和指定列位置让评论区自动填充左侧空白：

.main-container {
  padding-top: var(--main-margin-top);
  display: grid;
  grid-template-columns: var(--video-width) var(--main-right-section-width);
  gap: var(--default-gap);
  justify-content: center;
  grid-auto-flow: dense; /* 开启密集填充，让元素自动填补空白网格 */
}

.main-comment-section {
  grid-column: 1; /* 指定评论区仅占据第一列 */
}

@media screen and (max-width: 1190px) {
  .main-container {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    grid-template-rows: auto auto auto;
  }
}

问题原因说明 #

• 未设置右侧区域高度时，Grid默认按元素内容高度分配行高，右侧区域的高度会拉高整行，导致评论区只能排在右侧区域下方；通过指定评论区的列位置或网格区域，就能让它填充左侧下方的空闲空间
• 响应式场景中使用1fr固定行高，会忽略元素实际内容高度，导致内容溢出重叠；改用auto自适应内容高度即可解决该问题

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