i have the following grid

    <style>
        #out {
          display: grid;
          grid-auto-rows: 1fr;
          grid-template-columns: 1fr 1fr 1fr 1fr;
          gap: 50px 10px;
        }

        #spacer {
          height: 80px;
          grid-column: 1 / -1;
        }
    </style>

    <div id="out">
        <div class="product" id="1"></div>
        <div class="product" id="1"></div>
        <div class="product" id="1"></div>
    <div id="out">
    

and im “injecting” after loading next set of products a spacer with js below the last product div

    <div id="out">
        <div class="product" id="1"></div>
        <div class="product" id="1"></div>
        <div class="product" id="1"></div>
        <div class="spacer"></div>
        <div class="product" id="1"></div>
        <div class="product" id="1"></div>
        <div class="product" id="1"></div>          
    <div id="out">      
    

Unfortuntely the height of 80px does apply to the spacer element but below it is a huge gap similiar of height of one product div element. Any idea how to fix it?