[Vuejs]-How to use first:child and last:child after v-for in Vue.js?

Update your style with the following code

#grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap : 1rem;
}
#grid .elements:first-of-type,
#grid .elements:last-of-type{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1rem;
    grid-column: 1 / span 2;
    align-items: center;
}

Enjoy!