如何使CSS网格无响应？

Question

我正在尝试制作一个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>

我有以下脚本可以处理一些悬停：

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

以及以下CSS：

#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;
}

我的问题是，当将鼠标悬停在“ item”元素上并且当“ mainItem” div中的内容发生更改时，整个网格都将对其进行调整，并且元素的大小也会发生变化。 我要使网格中的每个元素都具有固定的高度和宽度，我该怎么做呢？

Answer 1

您的网格项目不留在原地，因为他们没有到位定义的宽度-你可以让他们采取使用比例宽度 grid-template-columns: repeat(5, 1fr)和grid-template-rows: 1fr 1fr 1fr所以宽度保持不变。

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

 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'; } 

 #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-columns: repeat(5, 1fr); /* ADDED */ grid-template-rows: 1fr 1fr 1fr; /* ADDED */ 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; } #itemPlaceholder { /* ADDED */ background: url(https://via.placeholder.com/400) no-repeat; background-size: contain; background-position: center; height: 100%; } 

 <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"></div> </div> </div> </center> 

Answer 2

您可以使用属性的grid-template-columns和grid-template-rows向网格应用固定的宽度和高度

https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid-template-columns

https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid-template-rows