CSS Grid布局：实现跨自动生成行的全屏高度侧边栏

这问题我之前做响应式布局时也碰到过，不用纠结提前指定行列数，用CSS Grid的网格线定位技巧就能轻松实现，不管你加多少个网格项目，侧边栏都会自动拉满整个容器的高度。

核心思路 #

给侧边栏设置 grid-row: 1 / -1 —— 这里的 -1 是CSS Grid的特殊值，代表最后一条网格线。不管Grid因为项目数量自动生成多少行，侧边栏都会从第一行的起始线一直延伸到最后一行的结束线，自动占满所有行的高度。

完整代码示例 #

HTML结构

<div class="grid-container">
  <aside class="sidebar">我是侧边栏</aside>
  <div class="grid-item">项目1</div>
  <div class="grid-item">项目2</div>
  <div class="grid-item">项目3</div>
  <div class="grid-item">项目4</div>
  <div class="grid-item">项目5</div>
  <!-- 随便新增多少个项目都没问题 -->
</div>

CSS样式

.grid-container {
  display: grid;
  /* 第一列给侧边栏留固定宽度，剩余列自动适配容器 */
  grid-template-columns: 200px repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem; /* 网格项之间的间距 */
  padding: 1rem;
}

.sidebar {
  /* 关键属性：跨所有行 */
  grid-row: 1 / -1;
  background-color: #f5f5f5;
  padding: 1.5rem;
  border-radius: 4px;
}

.grid-item {
  background-color: #e8e8e8;
  padding: 1.5rem;
  border-radius: 4px;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

效果说明 #

• 当你新增网格项目时，Grid会自动生成所需的行，侧边栏会立刻跟着扩展高度，完全覆盖所有行的范围。
• 如果想把侧边栏放在右侧，只需要调整grid-template-columns的顺序，把自适应列放在前面，侧边栏列放在后面即可：

  .grid-container {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) 200px;
  }
  

  侧边栏的grid-row: 1 / -1依然生效，自动占满全高。

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