I am trying to make a CSS Grid that will not change the height/width when the elements inside it change. I have the following code:
<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>
I have the following script that handles some hovering:
<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>
And the following 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;
}
My problem is that when hovering over the "item" elements and when the content inside of the "mainItem" div changes, the whole grid adapts to it and elements change in size. I want to make it so that each element in the grid has a fixed height and width how would I go about doing that?
Your grid items do not stay in place because they do not have a defined width in place - you can make them take proportional widths using grid-template-columns: repeat(5, 1fr)
and grid-template-rows: 1fr 1fr 1fr
so that the widths stay the same.
Also changed the image to a background image so that it stays inside the grid item - see demo below:
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>