如何用CSS Grid实现移动端拆分侧边栏，桌面端合并展示？

嘿，这个问题我之前也踩过坑！你已经搭好了基础的布局结构，只是差了关键一步来控制右侧栏的行高分配～

核心问题分析 #

你之前的桌面端写法里，sidebarTop被设置成跨两行（"intro sidebarTop" "content sidebarTop"），这会让CSS Grid自动拉伸它的高度去填满两行的总空间，自然就会占据过多位置。我们需要调整布局结构，让sidebarTop只占据自身内容的高度，把右侧剩余空间留给sidebarBottom。

完整解决方案代码 #

先看HTML结构（保持简洁清晰）：

<div class="grid-container">
  <div class="intro">Intro 区域内容</div>
  <div class="sidebar-top">Sidebar Top 内容（仅占自身高度）</div>
  <div class="content">Content 区域内容（可能较长）</div>
  <div class="sidebar-bottom">Sidebar Bottom 内容（占右侧剩余空间）</div>
</div>

然后是CSS样式，重点看桌面端的调整：

.grid-container {
  display: grid;
  /* 移动端布局：按顺序堆叠 */
  grid-template-areas:
    "intro"
    "sidebar-top"
    "content"
    "sidebar-bottom";
  gap: 1rem; /* 可选：添加元素间间距，提升可读性 */
}

/* 给每个区域绑定grid-area名称 */
.intro { grid-area: intro; }
.sidebar-top { grid-area: sidebar-top; }
.content { grid-area: content; }
.sidebar-bottom { grid-area: sidebar-bottom; }

/* 桌面端布局调整 */
@media (min-width: 600px) {
  .grid-container {
    /* 左右两列，比例可按需调整（比如2fr 1fr让左边更宽） */
    grid-template-columns: 1fr 1fr;
    /* 关键：第一行高度自适应内容，第二行占剩余所有空间 */
    grid-template-rows: auto 1fr;
    /* 重新规划区域位置 */
    grid-template-areas:
      "intro sidebar-top"
      "content sidebar-bottom";
  }

  /* 确保sidebar-top即使在第一行整体高度由intro决定时，也只占自身内容高度 */
  .sidebar-top {
    align-self: start;
  }
}

关键调整说明 #

1. 重新规划grid-template-areas：把sidebarTop限制在第一行右侧，sidebarBottom放在第二行右侧，避免跨行列导致的高度拉伸。
2. 设置grid-template-rows：用auto 1fr明确第一行高度由内容（intro和sidebar-top中较高的那个）决定，第二行自动占据剩余所有空间，这样sidebarBottom就能填满右侧剩下的区域。
3. 添加align-self: start：防止当intro内容比sidebar-top高时，sidebar-top被强制拉伸到intro的高度，确保它始终只占用自身内容所需的空间。

这样调整后，就能完美实现你想要的布局效果啦！

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