CSS Grid：如何调整侧边栏元素布局，压缩高度填充空白区域？

完全可以用CSS Grid实现你要的效果，核心是通过网格区域定义或行/列定位调整侧边栏项的位置，同时让行高自适应内容，压缩垂直空白。

实现步骤 #

1. 移动端基础布局：设置单列网格，宽度自适应
2. 桌面端断点（比如768px以上）：切换为两列网格，明确每个项的布局位置，让右侧的第二项和第四项紧挨着排列，左侧第一项占据前两行高度，第三项排在左侧下方。

完整代码示例 #

HTML结构

<div class="grid-container">
  <div class="grid-item item1">区域1</div>
  <div class="grid-item item2">区域2（侧边栏顶部）</div>
  <div class="grid-item item3">区域3</div>
  <div class="grid-item item4">区域4（侧边栏紧接区域2）</div>
</div>

CSS样式

.grid-container {
  display: grid;
  grid-template-columns: 1fr; /* 移动端单列布局 */
  gap: 1.2rem; /* 网格项之间的间距 */
  padding: 1rem;
}

/* 桌面端布局调整 */
@media (min-width: 768px) {
  .grid-container {
    grid-template-columns: 2fr 1fr; /* 左侧宽列，右侧窄列 */
    grid-template-areas:
      "item1 item2"
      "item1 item4"
      "item3 ."; /* 第三行左侧为item3，右侧留空 */
    grid-auto-rows: auto; /* 行高随内容自动调整，压缩空白 */
  }

  .item1 { grid-area: item1; }
  .item2 { grid-area: item2; }
  .item3 { grid-area: item3; }
  .item4 { grid-area: item4; }
}

/* 可选：给网格项加基础样式，方便预览效果 */
.grid-item {
  padding: 1.5rem;
  border-radius: 8px;
  background-color: #f0f0f0;
}

关键说明 #

• grid-template-areas直接映射布局结构，直观易懂，右侧的item2和item4会自动紧挨着排列，无多余空白，因为行高由内容高度决定。
• 左侧item1通过占据前两行位置，会自动适配右侧两个项的总高度，保持布局对齐。
• 若不想用grid-template-areas，也可以用grid-row和grid-column单独定位项，效果一致：

  .item1 { grid-row: span 2; } /* 占据两行高度 */
  .item2 { grid-column: 2; grid-row: 1; }
  .item4 { grid-column: 2; grid-row: 2; }
  .item3 { grid-column: 1; grid-row: 3; }
  

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