css - 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>

标签： csscss-grid