html - 居中网格项目

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>

标签： htmlcssgridcenteringcss-grid