Javascript 如何使CSS网格无响应？

我试图制作一个CSS网格，当其中的元素改变时，它的高度/宽度不会改变。我有以下代码：

    <center><div class="grid-container">
        <div id="item1" onmouseover="makeVisible('item1Center')" onmouseout="makeInvisible('item1Center')">Item 1
        </div>
        <div id="item2" onmouseover="makeVisible('item2Center')" onmouseout="makeInvisible('item2Center')">Item 2</div>
        <div id="item3" onmouseover="makeVisible('item3Center')" onmouseout="makeInvisible('item3Center')">Item 3</div>
        <div id="item4" onmouseover="makeVisible('item4Center')" onmouseout="makeInvisible('item4Center')">Item 4</div>
        <div id="item5" onmouseover="makeVisible('item5Center')" onmouseout="makeInvisible('item5Center')">Item 5</div>
        <div id="item6" onmouseover="makeVisible('item6Center')" onmouseout="makeInvisible('item6Center')">Item 6</div>
        <div id="itemCenter">
            <div id="item1Center" style="display: none;" onmouseover="makeVisible('item1Center')" onmouseout="makeInvisible('item1Center')">Item 1</div>
            <div id="item2Center" style="display: none;" onmouseover="makeVisible('item2Center')" onmouseout="makeInvisible('item2Center')">Item 2</div>
            <div id="item3Center" style="display: none;" onmouseover="makeVisible('item3Center')" onmouseout="makeInvisible('item3Center')">Item 3</div>
            <div id="item4Center" style="display: none;" onmouseover="makeVisible('item4Center')" onmouseout="makeInvisible('item4Center')">Item 4</div>
            <div id="item5Center" style="display: none;" onmouseover="makeVisible('item5Center')" onmouseout="makeInvisible('item5Center')">Item 5</div>
            <div id="item6Center" style="display: none;" onmouseover="makeVisible('item6Center')" onmouseout="makeInvisible('item6Center')">Item 6</div>
            <div id="itemPlaceholder"><img src="img/placeholder.jpg"></div>
        </div>
    </div></center>

---

我的问题是，当鼠标悬停在“item”元素上，“mainItem”div中的内容发生变化时，整个网格都会适应它，元素的大小也会发生变化。我想使网格中的每个元素都有一个固定的高度和宽度，我该怎么做？

您可以使用属性的网格模板列和网格模板行将固定的宽度和高度应用于网格

您的网格项没有保持在原位，因为它们没有定义的宽度-您可以使用

网格模板列：重复（5，1fr）

和

网格模板行：1fr 1fr 1fr

使它们的宽度保持不变

还将图像更改为背景图像，使其保留在网格项目内-请参阅下面的演示：

函数makeVisible（id）{
document.getElementById（id）.style.display='block'；
document.getElementById（'itemPlaceholder'）。style.display='none'；
}
函数makeInvisible（id）{
document.getElementById（id）.style.display='none'；
document.getElementById（'itemPlaceholder'）.style.display='block'；
}

#项目1{
网格区域：左上角；
}
#项目2{
网格区域：左中；
}
#项目1{
网格区域：左下角；
}
#项目1{
网格区域：右上角；
}
#项目1{
网格区域：右中；
}
#项目1{
网格区域：右侧；
}
#项目中心{
网格区域：居中；
}
.网格容器{
显示：网格；
网格模板列：重复（5，1fr）；/*添加*/
网格模板行：1fr 1fr 1fr；/*已添加*/
网格模板区域：“上左居中上右”“中左居中中中右”“底部左居中底部右”；
网格间距：5px；
填充：10px；
宽度：50vw；
高度：50vh；
}
.grid容器>div{
背景色：#E2D4B7；
文本对齐：居中；
填充：20px0；
字体大小：30px；
}
#添加了项目占位符{/**/
背景：url(https://via.placeholder.com/400)不重复；
背景尺寸：包含；
背景位置：中心；
身高：100%；
}

项目1
项目2
项目3
项目4
项目5
项目6
项目1
项目2
项目3
项目4
项目5
项目6

不鼓励仅链接答案。您应该以直接回答原始问题的方式总结文章，以问题中的代码为起点。非常感谢您提供的有用答案！

<script type="text/javascript">
        function makeVisible(id) {
            document.getElementById(id).style.display = 'block';
            document.getElementById('itemPlaceholder').style.display = 'none';
        }
        function makeInvisible(id) {
            document.getElementById(id).style.display = 'none';
            document.getElementById('itemPlaceholder').style.display = 'block';
        }
    </script>

#item1  { grid-area: topLeft; }
#item2  { grid-area: midLeft; }
#item1  { grid-area: botLeft; }
#item1  { grid-area: topRight; }
#item1  { grid-area: midRight; }
#item1  { grid-area: botRight; }
#itemCenter { grid-area: centered; }

.grid-container {
    display: grid;
    grid-template-areas: 
        'topLeft centered centered centered topRight'
        'midLeft centered centered centered midRight'
        'botLeft centered centered centered botRight';
    grid-gap: 5px;
    padding: 10px;
    width: 50vw;
    height: 50vh;
}

.grid-container > div {
    background-color: #E2D4B7;
    text-align: center;
    padding: 20px 0;
    font-size: 30px;
}