center elements in a grid

Question

I would like to center the last two elements of a grid but I can't find a solution.

.grid { 
    height: auto;
    margin: 50px 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, 350px);
    justify-content: center;
    grid-gap: 20px;
}

.grid-item {
    width: 350px;
    height: 200px;
    background: #333;
}

<div class="grid">
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>  
</div>

Answer 1

add a new class to the two elements, for example "center" and use this CSS :

.center {
   grid-column: span 2;
   align-self: center;
}