Как сделать последнюю карточку в этой CSS сетке go в новую строку и всегда занимать всю ширину?

Question

• Я использую CSS Grid с настройкой повторения для динамического добавления карт 300 пикселей
• Я хочу, чтобы последняя карта занимала на всю ширину и размещается ниже отдельной строкой

Как мне добиться этого с помощью CSS Сетка

HTML

<div id="app">
  <div class="my-cards">
    <div class="my-card" v-for="card in items" :key="card">{{card}}</div>
  </div>
</div>

CSS

html,
body, 
#app,
.my-cards{
    height: 100%;
}

.my-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-auto-rows: auto;
  grid-gap: 1.25rem;
}

.my-card {
    border: 1px solid #aaa;
    display: flex;
    justify-content: center;
    align-items: center;
}