CSS 网格：两列网格，其中左列项目扩展到内容，右列项目固定高度

Question

使用 CSS 网格，我尝试创建一个网格，其中左列项目的高度可随其中的内容扩展，但右列项目的高度是固定的。

但是，通过定义行，右侧列上的固定高度项目（照片）始终根据左侧的内容收缩或扩展

在内容最少的情况下，我希望右侧的照片的高度固定在摘要和统计数据1之间

内容很多，我还是希望右边的照片固定，左边的摘要展开

但是，每当我尝试将照片固定到特定行时，它最终都会与其所在行的内容高度相同

在我看来，

grid-template-rows

将每一行堆叠在下一行的顶部。但我希望定义一条完全存在于该堆叠之外的行线（距屏幕顶部 470 像素）

我该如何实现这一目标？

我的尝试。请注意“照片”项目如何始终随“统计”项目一起扩展

.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) /* at 70px, this line is above photo. at max content, it's lower */
    320px  /* with minimal content, this is where I want photo to be 40+40+70+320=470px */
    minmax(400px, max-content)
    minmax(400px, max-content)
}

.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;
    grid-column: 2 / 3;
    grid-row: 1 / 4;
}

.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: 4 / 6;
}

<div class="container">
  <div class="nav">Nav</div>
  <div class="name">Name</div>
  <div class="photo">Photo</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="sidebar">Sidebar</div>
</div>

Answer 1

听起来您应该仅使用网格来控制列，然后在每列中使用弹性框来控制行。

.d1 {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 1em;
}

.d1>div {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.summary, .statistics, .photo, .sidebar {
  padding: 1em;
  border-radius: 8px;
}

.summary, .statistics {
  background: #eee;
}

.photo {
  height: 70px;
  background: yellow;
}

.sidebar {
  height: 170px;
  background: lime;
}

<div class="d1">
  <div>
    Column 1
    <div class="summary">summary</div>
    <div class="statistics">
      statistics 1
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempor nunc mauris, sit amet placerat tortor lobortis dapibus. Nam lectus eros, maximus ac magna vel, congue consequat eros. Fusce id pretium diam. Cras sit amet pharetra ante. Sed quis commodo quam, vel facilisis ipsum. Vestibulum sodales iaculis arcu, et fringilla nisi ullamcorper sed. Donec interdum sit amet est non accumsan. Donec non augue feugiat, fermentum nunc non, convallis est. Cras vel ligula nec odio faucibus ultricies. Sed vulputate tortor eget pretium convallis. Cras interdum elit eget mi porta suscipit. Morbi ut velit diam. Etiam finibus eros et efficitur rutrum. Quisque viverra metus ac eleifend imperdiet. Quisque pretium ut purus vitae tempus. Duis varius risus congue velit faucibus, sed interdum purus consectetur.
      </p>
    </div>
    <div class="statistics">
      statistics 2
      <p>
        Cras volutpat velit non mi sagittis condimentum. Cras tempor aliquet turpis sed pretium. Nunc aliquet sodales turpis quis ultrices. Duis auctor accumsan enim, quis maximus ex malesuada a. Donec a felis ut erat tempus euismod non vel neque. Proin lectus massa, sagittis at imperdiet nec, consequat ut neque. Sed vel placerat neque, vel varius urna. Vivamus interdum euismod urna a accumsan. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
      </p>
    </div>
  </div>
  <div>
    Column 2
    <div class="photo">photo<br>fixed height</div>
    <div class="sidebar">sidebar<br>fixed height</div>
  </div>
</div>