将元素设置为2fr而不是1fr CSS网格列

Question

我正在尝试创建一个灵活的CSS网格以显示一些卡片。我已将卡片的CSS代码设置为重复并自动填充，最小为330px，最大为1fr。一切都很好，但是现在我需要一张更大的卡片，价格为2fr。问题很简单，但是我可以找到一种方法将此卡设置为2fr，而不是1fr。

卡片容器

.cards-row{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    grid-column-gap: 15px;
}

<div class="cards-row" style="margin-top: 30px;">
     <div class="card-wrap">
     </div>
     <div class="card-wrap">
     </div>
     <div class="card-wrap">
     </div>
     <div class="card-wrap">
     </div>
     <div class="card-wrap">
     </div>
</div>

这基本上是我想要实现的

Answer 1

使最后一个元素跨越2列：

.cards-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-gap: 15px;
}

.card-wrap {
  height: 100px;
  background: red;
}
.card-wrap:last-child {
  grid-column: auto/span 2;
}

<div class="cards-row" style="margin-top: 30px;">
  <div class="card-wrap">
  </div>
  <div class="card-wrap">
  </div>
  <div class="card-wrap">
  </div>
  <div class="card-wrap">
  </div>
  <div class="card-wrap">
  </div>
</div>