Html CSS网格-跨多行图像-不影响所有行的高度-无法计算出来

我试图跨越图像超过4行，而不影响2列中每行的高度。但每次我调整图像的大小，其他行都会有巨大的间隙，图像右侧也有间隙。我真的很困惑（）。我真的很想得到一个解释，为什么我的网格区域不工作

CSS和HTML：

。中间行{
宽度：1140px；
保证金：0自动；
}
.工作步骤{
显示：网格；
网格模板柱：1fr 1fr；
网格模板行：自动；
网格模板区域：
“img工作步骤1”
“img工作步骤2”
“img工作步骤3”
“img下载行动”；
}
.应用程序显示框{
网格面积：img；
}
.应用程序显示{
宽度：40%；
}
.工作步骤--1{
网格区域：工作步骤1；
}
.工作步骤--2{
网格区域：工作步骤2；
}
.工作步骤--3{
网格区域：工作步骤3；
}
.下载操作{
网格区域：下载操作；
}
.下载行动img{
高度：40px；
}

它是如何工作的；简单到1，2，3
1.

选择最适合您需要的订阅计划并签名
今天起床。

2.

使用我们的移动应用程序或网站订购美味佳肴。或
你甚至可以打电话给我们！

3.

在不到20分钟的时间内享用您的晚餐。下次见
时间

我将提供两种解决方案

在第一种解决方案中，除了最后一行之外，侧文本列表不依赖于图像高度。为此，您需要为最后一行设置1fr，然后帮助所有较高的行接收其内容的高度

.worksteps {
  ...
  grid-template-rows: auto auto auto 1fr;
  ...
}

。中间行{
宽度：1140px；
保证金：0自动；
}
.工作步骤{
显示：网格；
网格模板柱：1fr 1fr；
网格模板行：自动1fr；
网格模板区域：
“img工作步骤1”
“img工作步骤2”
“img工作步骤3”
“img下载行动”；
}
.应用程序显示框{
网格面积：img；
}
.应用程序显示{
宽度：40%；
}
.工作步骤--1{
网格区域：工作步骤1；
}
.工作步骤--2{
网格区域：工作步骤2；
}
.工作步骤--3{
网格区域：工作步骤3；
}
.下载操作{
网格区域：下载操作；
}
.下载行动img{
高度：40px；
}

它是如何工作的；简单到1，2，3
1.

选择最适合您需要的订阅计划并签名
今天起床。

2.

使用我们的移动应用程序或网站订购美味佳肴。或
你甚至可以打电话给我们！

3.

在不到20分钟的时间内享用您的晚餐。下次见
时间

这是CSS网格的标准，因此如果您不希望出现这种行为，我建议您使用不同的布局方法或调整方法。您的CSS中明确规定，组合的右行的高度应与左列的高度相匹配。是否需要此结果？-这里右边的线条没有在高度上拉伸。@s.kuznetsov如果调整左边图像的大小，线条甚至没有拉伸？会是nice@MrB，您对我的解决方案有何评论？@s.kuznetsov感谢这两种解决方案。我选了第一个。这对我很有帮助，使我的目标得以实现。但是我很惊讶第四行的值对结果有如此大的影响。