像Shutterstock这样的CSS网格布局

Question

i具有用于显示图像的网格布局的内容。 所以我怎么能有一个像Shutterstock这样的网格布局来具有动态的宽度和高度

我尝试了这个，但是不一样

.gridsys{
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-auto-rows: 300px 200px;
}

这是整个代码：

<div class="gridsys">
   <div class="item">
      <img src="https://picsum.photos/300/300/?random">
   </div>
</div>
.item{
    img{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    @media (min-width: 480px) {
      &:first-child {
        grid-area: 1 / 1 / span 2 / span 2;
      }
    }
}

我想要这样的东西： https://www.shutterstock.com/featured-collections/fathers-day-187157459