CSS网格中行内的意外空白

Question

与此（部分重复）question的不同之处在于，我不使用align-items：center，我使用start。如果我在网格项目上使用display：flex，而在图像上使用object-fit：contain / cover / fill则无法解决问题。

我的任务是创建此网格：

。

为此，我使用css grid和grid-template-areas。

结果，我在某些行中有意外的空白空间。有一些规则可以解决吗？还是应该修复html结构？

.masttech-gallery__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, auto);
  grid-gap: 40px;
  grid-template-areas:
    "pic1 pic2 pic2 pic3"
    "pic1 pic2 pic2 pic6"
    "pic4 pic2 pic2 pic6"
    "pic4 pic5 pic5 pic6"
    "pic7 pic5 pic5 pic6";
  align-items: start;
  list-style: none;
}

.masttech-gallery__item img {
  width: 100%;
  height: auto;
}

<article class="masttech-gallery js-gallery js-block">
  <ul class="masttech-gallery__list">
    <li class="masttech-gallery__item" style="grid-area: pic1; margin-left: calc(-1 * 100% - 40px);">
      <img src="https://via.placeholder.com/1000x2292">
    </li>
    <li class="masttech-gallery__item" style="grid-area: pic2;">
      <img src="https://via.placeholder.com/1000x3564">
    </li>
    <li class="masttech-gallery__item" style="grid-area: pic3; margin-right: calc(-1 * 100% - 40px);">
      <img src="https://via.placeholder.com/1000x2084">
    </li>
    <li class="masttech-gallery__item" style="grid-area: pic4; margin-left: calc(-1 * 100% - 40px);">
      <img src="https://via.placeholder.com/1000x1750">
    </li>
    <li class="masttech-gallery__item" style="grid-area: pic5;">
      <img src="https://via.placeholder.com/1000x2188">
    </li>
    <li class="masttech-gallery__item" style="grid-area: pic6; margin-right: calc(-1 * 100% - 40px);">
      <img src="https://via.placeholder.com/1000x2526">
    </li>
    <li class="masttech-gallery__item" style="grid-area: pic7; margin-left: calc(-1 * 100% - 40px);">
      <img src="https://via.placeholder.com/1000x1064">
    </li>
  </ul>
</article>

解决方案。

只需将grid-template-rows固定为min-content min-content min-content 1fr 4fr。