How to stop the influence of CSS grid to just what's visible. Experimenting on vertical buttons - css

Question

I'm experimenting on vertical buttons using CSS display grid & inline-grid and have them working. It's when I try to add regular buttons that things go wrong.
The image displays the issue.
]1
The grid's influence extends out past the visible items it contains and hence the "control" buttons are ending up below the vertical buttons instead of up top next to the first vertical button. I've tried surrounding the grid divs with other divs to try to contain their influence, but no luck.
How do I get the "control" buttons currently at the bottom back up toward the top?
<div id="control">
<div id="title">
Buttons In Grid
</div>
<div class="sideButtonsOuterContainer">
<div class="sideButtonsInnerContainer">
<button id="buttonR0" class="sideButtons">A</button>
<button id="buttonR1" class="sideButtons">B</button>
<button id="buttonR2" class="sideButtons">C</button>
</div>
<div class="sideButtonsInnerContainer">
<button id="buttonR3" class="sideButtons">D</button>
<button id="buttonR4" class="sideButtons">E</button>
<button id="buttonR5" class="sideButtons">F</button>
</div>
<div class="sideButtonsInnerContainer">
<button id="buttonR6" class="sideButtons">G</button>
<button id="buttonR7" class="sideButtons">H</button>
<button id="buttonR8" class="sideButtons">I</button>
</div>
</div>
<div id="sideControls">
<button class="topButtons">Control</button>
<button class="topButtons">Control</button>
<button class="topButtons">Control</button>
<button class="topButtons">Control</button>
<button class="topButtons">Control</button>
</div>
</div>
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
#control{
width: 20%;
}
#title{
text-align: center;
font-size: 43px;
color: rgb(255, 0, 0);
}
.sideButtonsOuterContainer{
display: grid;
width: 52px;
grid-template-rows: auto auto auto;
gap: 10px;
background-color: #000000;
padding-left: 0px;
padding-right: 0px;
padding-top: 10px;
padding-bottom: 10px;
}
.sideButtonsInnerContainer {
display: inline-grid;
width: 45px;
grid-template-rows: auto auto auto;
gap: 4px;
padding: 3px;
}
.sideButtons{
background-color: #4CAF50; /* Green */
color: white;
width: 45px;
height: 127px;
text-align: center;
font-size: 38px;
}
.topButtons{
background-color: #4CAF50; /* Green */
border: none;
color: white;
text-align: center;
text-decoration: none;
font-size: 38px;
}