将元素设置为 2fr 而不是 1fr CSS Grid Column

Question

我正在尝试创建一个灵活的 CSS 网格来显示一些卡片。我已将卡片的 CSS 代码设置为重复和自动填充，最小为 330 像素，最大为 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: 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>