CSS Grid布局侧边栏两个Div间出现大间距的解决咨询

嘿，我完全懂你碰到的这个问题——左边section1的长内容把网格行撑得老高，导致右边的section5和section6被迫隔开一大段距离，明明想让它们紧紧挨在一起，对吧？别担心，咱们可以通过嵌套Grid容器的方式解决这个问题，同时还能完整保留你想要的移动端布局灵活性。

问题根源 #

你当前的Grid模板把section5放在第一行右侧，section6放在第二行右侧，但左边section1的高度会把第一行的整个行高拉满，第二行右侧的section6自然就跟着第一行的高度走，硬生生多出了一大段空隙。

解决方案：嵌套Grid容器 #

核心思路是把需要紧密排列的section5和section6放进一个单独的Grid容器里，让它们在自己的小网格里独立布局，不受左边内容高度的影响。同时在移动端通过display: contents让这个嵌套容器“消失”，让section5和6回到父Grid中，继续用你原来的grid-template-areas控制顺序。

修改后的HTML代码

<div class="grid-container">
  <div class="content-section" area="section1" title="Overview">
    <p>long content</p>
    <p>long content</p>
    <p>long content</p>
    <p>long content</p>
    <p>long content</p>
    <p>long content</p>
    <p>long content</p>
    <p>long content</p>
    <p>long content</p>
  </div>
  <div class="content-section" area="section2">2</div>
  <div class="content-section" area="section3">3</div>
  <div class="content-section" area="section4">4</div>
  <!-- 把section5和6放进嵌套容器 -->
  <div class="sidebar-group">
    <div class="content-section" area="section5">5</div>
    <div class="content-section" area="section6">6</div>
  </div>
</div>

修改后的CSS代码

.grid-container {
  display: grid;
  grid-template-columns: 6fr 4fr;
  gap: 2rem;
  /* 调整网格区域，把右侧合并为一个sidebar区域 */
  grid-template-areas: 
    "section1 sidebar"
    "section2 sidebar"
    "section3 ."
    "section4 .";
}

/* 新增嵌套Grid容器样式 */
.sidebar-group {
  grid-area: sidebar;
  display: grid;
  gap: 2rem; /* 和外部Grid的间距保持一致，视觉统一 */
}

.content-section {
  background: #eee;
  border: 1px solid #ccc;
  padding: 1rem;
  grid-area: ${({ area })=>area};
  align-self: start;
}

@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr;
    grid-template-areas: 
      "section1"
      "section5"
      "section2"
      "section6"
      "section3"
      "section4";
  }
  
  /* 移动端让嵌套容器“消失”，子元素直接成为父Grid的项 */
  .sidebar-group {
    display: contents;
  }
}

方案说明 #

• 桌面端：sidebar-group占据父Grid的右侧sidebar区域，内部用Grid布局让section5和6紧密排列，它们的高度只由自身内容决定，再也不会被左边的长内容影响。
• 移动端：display: contents会让sidebar-group的样式失效，它的子元素（section5和6）直接变成父Grid的独立网格项，你原来的grid-template-areas可以完全正常工作，完美保留你想要的移动端布局顺序。

这样既解决了侧边栏间距过大的问题，又没牺牲任何响应式布局的灵活性，试试看吧！

内容来源于stack exchange