带有图像的 CSS 网格在 Firefox 中表现不同

我有以下HTML:

<div class="parent">
  <div class="container">
    <img class="image1" src="https://i.pinimg.com/474x/40/bf/41/40bf419913701440c78d66c7fd722e7e.jpg" />
    <img class="image2" src="https://i.pinimg.com/474x/40/bf/41/40bf419913701440c78d66c7fd722e7e.jpg" />
    <img class="image3" src="https://i.pinimg.com/474x/40/bf/41/40bf419913701440c78d66c7fd722e7e.jpg" />
  </div>
</div>

I want the .container div to have it's size defined by 20% of its .parent. This is what I got in Chrome:

为了实现这一目标，我使用了以下风格:

.parent {
  position: relative;
  width: 800px;
  height: 300px;
  background-color: green;
  margin: auto;
}

.container {
  position: absolute;
  bottom: 20px;
  left: 20px;
  display: grid;
  grid-template-areas:
    "area1 area2"
    "area1 area3";
  grid-template-rows: 50% 50%;
  height: 20%;
  gap: 5px;
}

.image1 {
  grid-area: area1;
}

.image2 {
  grid-area: area2;
}
.image3 {
  grid-area: area3;
}

img {
  height: 100%;
}

然而，我知道我这样做的方式有点混乱和不一致，例如，右侧的两幅图像占据了网格容器的50%，但我仍然需要一个我使用5px的间隙.

This is my Codepen and if I open it in Firefox I get a different result:

看起来网格容器正在扩展其宽度，我不知道为什么，那么如何才能获得第一幅图像中的一致跨浏览器结果？

我之所以使用grid，是因为它具有响应性，我会在以后更改mobile的模板区域，所以使用Flexbox不是一个选项.