如何在方向改变时将网格布局子级线性布局居中对齐？

<style>
    .grid-container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        justify-content: center;
        align-items: center;
        height: 300px;
    }

    .grid-item {
        background-color: #ccc;
        text-align: center;
        padding: 20px;
    }
</style>

<div class="grid-container">
    <div class="grid-item">Item 1</div>
    <div class="grid-item">Item 2</div>
    <div class="grid-item">Item 3</div>
    <div class="grid-item">Item 4</div>
</div>