Centering grid items

Question

I have been struggling with this one ... it seemed farely simple but aparantly I am missing something ...

I am trying to center the pink boxes within the violet one.

if anyone can help it will be a blessing

Here's what I am aiming at :

Many thanks in advance to anyone who can help, hours of internet search didn't help :-(

<style>
    .redBox{
        list-style: none;
        display: grid;
        grid-gap:20px;
        grid-template-columns: repeat(auto-fill,300px);
        justify-content: center;
        background-color:violet;

    }
    .redBox li{
        border: 1px solid #ddd;
        width:300px;
        height:100px;
        background-color:pink;

        }
</style>
<ul class="redBox">
    <li>
        <div>1</div>
    </li>
    <li>
        <div>2</div>
    </li>
    <li>
        <div>3</div>
    </li>
    <li>
        <div>4</div>
    </li>
    <li>
        <div>5</div>
    </li>    
</ul>