如何实现左侧自适应右侧固定高度的CSS Grid双列布局？

问题描述 #

需要实现双列Grid布局：

• 左侧列元素高度随内容自适应扩展
• 右侧的Photo元素高度固定，不受左侧行高度变化影响：
  • 左侧内容较少时，Photo固定在距顶部470px的位置（对应左侧Summary和Stats1之间）
  • 左侧Summary内容较多、高度扩展时，Photo仍保持固定高度和顶部位置

原方案通过grid-template-rows定义行，但Photo绑定到特定行后，会跟随所在行的高度收缩/扩展，无法脱离行的堆叠流。

解决方案 #

CSS Grid的行是流式堆叠的，要让元素脱离行流固定位置，推荐两种实现思路：

思路1：相对定位+绝对定位 #

通过让Photo脱离Grid行流，直接固定位置，同时保留其他元素的Grid布局逻辑：

调整后的CSS代码

.container {
  display: grid;
  min-height: 100vh;
  padding: 0px 60px;
  grid-template-columns: 8fr 4fr;
  grid-gap: 18px;
  grid-template-rows:
    40px
    40px
    minmax(70px, max-content)
    minmax(400px, max-content)
    minmax(400px, max-content);
  position: relative; /* 为绝对定位元素提供参考 */
}

.nav {
  background-color: #969593;
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.name {
  background-color: #969593;
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

.photo {
  background-color: #969593;
  position: absolute; /* 脱离Grid行流 */
  top: 470px; /* 固定距顶部位置 */
  right: 60px; /* 匹配容器右侧内边距 */
  width: calc((100% - 120px - 18px) * 4 / 12); /* 计算右侧列宽度：总宽度-左右内边距-列间距，再按比例分配 */
  height: 320px; /* 固定高度 */
}

.summary {
  background-color: #969593;
  grid-column: 1 / 2;
  grid-row: 3 / 4;
}

.stats1 {
  background-color: #969593;
  grid-column: 1 / 2;
  grid-row: 4 / 5;
}

.stats2 {
  background-color: #969593;
  grid-column: 1 / 2;
  grid-row: 5 / 6;
}

.sidebar {
  background-color: #969593;
  grid-column: 2 / 3;
  grid-row: 1 / 4;
  margin-top: calc(470px + 320px + 18px); /* 预留Photo高度+间距，避免被覆盖 */
}

思路2：右侧列独立容器 #

把右侧列单独做成一个Grid容器，通过内边距/外边距固定Photo位置，兼容性更好：

调整后的CSS代码

.container {
  display: grid;
  min-height: 100vh;
  padding: 0px 60px;
  grid-template-columns: 8fr 4fr;
  grid-gap: 18px;
  grid-template-rows:
    40px
    40px
    minmax(70px, max-content)
    minmax(400px, max-content)
    minmax(400px, max-content);
}

/* 右侧独立容器 */
.right-column {
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: sticky;
  top: 0;
}

.photo {
  background-color: #969593;
  height: 320px;
  margin-top: 470px; /* 固定距顶部的位置 */
}

.sidebar {
  background-color: #969593;
  flex-grow: 1;
}

对应调整后的HTML结构

<div class="container">
  <div class="nav">Nav</div>
  <div class="name">Name</div>
  <div class="summary">
Summary
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quam lectus, ultricies et quam eu, venenatis viverra felis. Nullam pharetra efficitur lectus, sed eleifend tortor laoreet vel. Aliquam luctus porttitor dictum. Integer vel justo ligula. Suspendisse pellentesque, justo vel blandit aliquet, turpis lacus dictum lorem, sed mollis felis augue nec mi. Donec sed nulla dolor. Quisque eget dui sit amet libero scelerisque interdum eget ac enim. Fusce dolor mi, egestas id finibus non, scelerisque sit amet ante. Mauris scelerisque ut mi eget gravida. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sodales dolor vel justo euismod vestibulum. Sed a metus facilisis, dictum turpis eget, vestibulum enim.
  </div>
  <div class="stats1">Stats1</div>
  <div class="stats2">Stats2</div>
  <!-- 右侧独立容器 -->
  <div class="right-column">
    <div class="photo">Photo</div>
    <div class="sidebar">Sidebar</div>
  </div>
</div>

内容的提问来源于stack exchange，提问作者Sean D.