如何用HTML CSS Grid实现独立列高度及指定响应式布局？

需求说明 #

• 桌面端布局：左侧为「标题+帖子」模块，右侧为「成员」模块（右侧模块高度与左侧整体高度对齐）
• 移动端布局：「成员」模块在前，「标题」「帖子」模块依次在后
• 要求各模块仅占用自身所需空间，禁止使用JavaScript，可修改HTML或更换布局方案

原代码问题 #

使用Grid布局时，.members设置grid-row: 1 / -1导致左侧标题所在行被拉伸至与成员模块高度一致，进而造成标题与帖子模块间出现不必要的空隙。

方案一：优化Grid布局（无需修改HTML） #

通过明确指定Grid行结构，让标题、帖子各自占用自身高度的行，成员模块跨两行实现高度对齐：

.container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  max-width: 600px;
  margin: 0 auto;
}

.title, .members, .posts {
  padding: 1rem;
  background: #f1f1f1;
}

@media (min-width: 768px) {
  .container {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto 1fr; /* 第一行适配标题高度，第二行适配帖子高度 */
    gap: 1rem;
  }

  .title {
    grid-column: 1;
    grid-row: 1;
  }

  .posts {
    grid-column: 1;
    grid-row: 2;
  }

  .members {
    grid-column: 2;
    grid-row: 1 / 3; /* 跨标题、帖子两行，自动对齐左侧总高度 */
  }
}

对应的HTML保持原结构即可：

<div class="container">
  <div class="title">Title goes here</div>
  <div class="members">Members list here Members list here Members list here Members list here Members list here Members list here Members list here Members list here Members list here Members list here Members list here Members list here Members list here Members list here Members list here Members list here Members list here Members list here Members list here Members list here</div>
  <div class="posts">Posts go here</div>
</div>

方案二：使用Flex布局（结构更直观） #

通过嵌套容器将标题与帖子整合为左侧列，配合Flex的方向切换实现响应式布局：

修改后的HTML #

<div class="container">
  <div class="members">Members list here Members list here Members list here Members list here Members list here Members list here Members list here Members list here Members list here Members list here Members list here Members list here Members list here Members list here Members list here Members list here Members list here Members list here Members list here Members list here</div>
  <div class="left-column">
    <div class="title">Title goes here</div>
    <div class="posts">Posts go here</div>
  </div>
</div>

对应CSS #

.container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 600px;
  margin: 0 auto;
}

.left-column {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.title, .members, .posts {
  padding: 1rem;
  background: #f1f1f1;
}

@media (min-width: 768px) {
  .container {
    flex-direction: row;
  }

  .left-column {
    flex: 2; /* 左侧列宽度占比2份 */
  }

  .members {
    flex: 1; /* 右侧列宽度占比1份 */
    align-self: stretch; /* 自动拉伸高度与左侧列一致 */
  }
}

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