如何在网格行的末尾添加空白而不拉伸项目

Question

我正在尝试布局一个容器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-columns

我正在尝试布局一个容器div来填充屏幕的大小，但我希望空行的宽度最小，例如40像素，最后一行之后只有空白。但是内容会延伸...

Answer 1

这是您想要的吗？您需要的是：第一行占40px，最后一行占所有剩余空间