CSS网格可响应给定的最大宽度和长宽比

Question

我在CSS网格中遇到问题。 我定义了一个网格

.cover {
  max-width: 1080;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
}

在这个网格内，我有一些积木

.horizontal {
  grid-column: span 2;
  grid-row: span 1;
}
.large {
  grid-column: span 2;
  grid-row: span 2;
}
.vertical {
  grid-column: span 1;
  grid-row: span 2;
}
.small {
  grid-column: span 1;
  grid-row: span 1;
}

每个块的内部都有一个图像，我只有两个变量：网格的最大宽度1080px和小块的纵横比360 x 280。 如何使该网格做出响应以保持块的长宽比？

我的html很简单

<div class="cover">
 <div class="horizontal"></div>
 <div class="small"></div>
 <div class="small"></div>
 <div class="horizontal"></div>
 <div class="small"></div>
 <div class="small"></div>
 <div class="small"></div>
</div>