css - 如何在网格行的末尾添加空白而不拉伸(stretch)元素

我正在尝试布局容器div以填充屏幕的大小，但我希望空行的宽度最小，例如40像素，最后一行之后只有空白。但是内容很长，我不知道为什么。

.container{
  display: grid;
  min-height: calc(100vh - 100px);
  grid-template-rows: minmax(40px, auto);
  background: red;
}

.test{
  grid-row: 2;
  width: 350px;
}

.content-after-grid{
  margin: 0;
  background-color:black;
  width: 100vw;
  height: 100px;
}

<div class="container">
  <img src="https://cms-static.wehaacdn.com/hoards-com/images/milk.16566.jpg" class="test">
</div>
<div class="content-after-grid">
</div>

代码段中的图像应该是从顶部开始的40px，其余空间应该为空。它或多或少应该像auto-fill一样工作。我该如何实现这一目标？

编辑：我添加了一张图片以更详细地显示我要执行的操作。我还在网格后面添加了一个块，以显示到目前为止发生的事情。图片应位于共享其高度的行中。这就是为什么我使用minmax()的原因。因为我希望空行的高度为40px，但是包含内容的行会扩展为适合该内容，因此为minmax(40px, auto)。它应该像auto-fill和grid-template-rows一样工作

最佳答案

这是你想要的吗？您需要的是grid-template-rows: 40px auto 1fr;：第一行占40px，最后一行占所有剩余空间

body {
  padding: 0;
  margin: 0;
}

.container{
  display: grid;
  min-height: 100vh;
  grid-template-rows: 40px auto 1fr;
  background: red;
}

.test{
  grid-row: 2;
  width: 350px;
}

.content-after-grid{
  margin: 0;
  background-color:black;
  width: 100vw;
  height: 100px;
}

<div class="container">
  <img src="https://cms-static.wehaacdn.com/hoards-com/images/milk.16566.jpg" class="test">
</div>
<div class="content-after-grid">
</div>

关于css - 如何在网格行的末尾添加空白而不拉伸(stretch)元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59399030/