CSS Grid中间列无法占满100vh，响应式网格布局实现求助

嘿，针对你用CSS Grid开发布局原型遇到的问题，我整理了一套完整的解决方案，既能实现响应式堆叠/水平排列，又能解决中间列无法填满100vh的问题：

核心思路 #

1. 给网格容器设置100vh的高度，确保它能撑满整个视口
2. 用grid-template-areas明确三个区域的位置，配合媒体查询切换布局方向
3. 针对不同断点分别定义网格的行/列规则，固定drag-handle的高度

完整代码实现 #

首先是HTML结构（假设你的容器类是layout-container）：

<div class="layout-container">
  <div class="discovery-list">Discovery List</div>
  <div class="drag-handle">Drag Handle</div>
  <div class="sharing-list">Sharing List</div>
</div>

然后是CSS代码：

/* 基础网格容器设置 */
.layout-container {
  display: grid;
  height: 100vh; /* 关键：让容器撑满视口高度 */
  margin: 0;
  padding: 0;
  gap: 8px; /* 可选：添加区域间的间距 */
  /* 先定义大屏的水平布局作为默认 */
  grid-template-columns: 1fr auto 1fr; /* 左右区域平分剩余空间，中间自适应 */
  grid-template-rows: 100%; /* 行高占满容器高度 */
  grid-template-areas: 
    "discovery-list drag-handle sharing-list";
}

/* 定义各区域的网格位置 */
.discovery-list {
  grid-area: discovery-list;
  background: #f0f0f0;
}
.drag-handle {
  grid-area: drag-handle;
  background: #ccc;
  /* 大屏下不需要固定高度，靠容器高度撑满 */
}
.sharing-list {
  grid-area: sharing-list;
  background: #f0f0f0;
}

/* 响应式断点：屏幕宽度<500px时垂直堆叠 */
@media (max-width: 500px) {
  .layout-container {
    grid-template-columns: 100%; /* 单列布局 */
    grid-template-rows: 1fr 30px 1fr; /* 中间行固定30px高度，其余平分 */
    grid-template-areas: 
      "discovery-list"
      "drag-handle"
      "sharing-list";
  }
  
  .drag-handle {
    height: 30px; /* 固定高度 */
  }
}

关键细节解释 #

• 容器高度设置：height: 100vh是解决中间列无法填满100vh的核心，确保网格容器本身占满整个视口高度，内部的网格行/列会继承这个高度
• 大屏布局规则：grid-template-columns: 1fr auto 1fr让左右两个列表自动平分剩余空间，中间的drag-handle根据自身内容宽度自适应，同时grid-template-rows: 100%让所有行（这里只有一行）高度撑满容器
• 小屏布局规则：切换为单列后，用grid-template-rows: 1fr 30px 1fr让drag-handle固定30px，上下两个列表平分剩余的视口高度
• 网格区域命名：通过grid-template-areas让布局结构更清晰，不用手动计算行列位置

如果你的drag-handle在大屏下需要固定宽度（而非自适应），可以把auto换成具体的宽度值，比如60px，这样中间列宽度固定，高度依然会撑满100vh。

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