PHP while loop creates space between buttons - php

Question

I'm trying to use a while loop to dynamically create buttons based on the number of outcomeId, but when I try to create the buttons with the loop, it creates gaps between the buttons.
<div class="outcomes">
<?php
//echo "<button class=\"outcomebtn\">Outcome A</button>";
//echo "<button class=\"outcomebtn\">Outcome B</button>";
$arrayLength = count($_SESSION['outcomeId']);
$i = 0;
while ($i < $arrayLength){
$num = $_SESSION['outcomeId'][$i];
echo "<button class=\"outcomebtn\">Outcome $num</button>";
$i = $i + 1;
}
?>
</div>
When I include the commented buttons, there are no gaps between any buttons. It only happens when I comment out the buttons that are not included in the loop.
Below is the webpage (1) including commented buttons (2) only using buttons from loop:
edit: here is my .css
.outcomes{
display: grid;
grid-template-columns: 1fr;
width: 100%;
height: 200px;
}
.outcomebtn{
font-size: 20pt;
color: rgba(10, 99, 231, 0.829);
text-align: left;
font-size: 20px;
height: 65px;
background-color: transparent;
border-color: 2px lightgray;
}

Answer 1

Reproducing the problem
The problem reproduces only when there are exactly 2 buttons on the page:
.outcomes {
display: grid;
grid-template-columns: 1fr;
width: 100%;
height: 200px;
}
.outcomebtn {
font-size: 20pt;
color: rgba(10, 99, 231, 0.829);
text-align: left;
font-size: 20px;
height: 65px;
background-color: transparent;
border-color: 2px lightgray;
}
<div class="outcomes">
<button class="outcomebtn">Outcome 1</button>
<button class="outcomebtn">Outcome 2</button>
</div>
Reason
The problem happens because .outcomes class has fixed height in 200px.
Possible solution
One of the possible solutions is to get rid of this height css-property in .outcomes class at all:
.outcomes {
display: grid;
grid-template-columns: 1fr;
width: 100%;
}
.outcomebtn {
font-size: 20pt;
color: rgba(10, 99, 231, 0.829);
text-align: left;
font-size: 20px;
height: 65px;
background-color: transparent;
border-color: 2px lightgray;
}
<div class="outcomes">
<button class="outcomebtn">Outcome 1</button>
<button class="outcomebtn">Outcome 2</button>
</div>

Answer 2

I found the problem was that my CSS had an unnecessary height variable in the outcomes class. Once I removed that, it was fixed.