居中网格项

Question

我一直在努力挣扎...这似乎很简单，但显然我错过了一些东西...

我试图将粉红色的盒子放在紫罗兰色的盒子中间。

如果有人可以帮助，那将是一件好事

这就是我的目标：

在此先感谢任何可以提供帮助的人，数小时的互联网搜索无济于事：-（

<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>