如何使CSS网格不响应其内部元素的变化？

<style>
    .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 100px;
        grid-auto-flow: dense;
        gap: 10px;
    }

    .grid-item {
        background-color: #ccc;
        padding: 10px;
    }
</style>

<div class="grid-container">
    <div class="grid-item">元素1</div>
    <div class="grid-item">元素2</div>
    <div class="grid-item">元素3</div>
    <div class="grid-item">元素4</div>
    <div class="grid-item">元素5</div>
    <div class="grid-item">元素6</div>
    <div class="grid-item">元素7</div>
</div>