Css grid on while loop results

See more:

CSS

grid

I have this while loop and I'm getting results from it just fine, but now I want to put those results next to each other with grid.
I have done this

.container1 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(1, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    }

but this doesn't put my divs next to each other. it will look like this
'
[div][nothing][nothing]
[div][nothing][nothing]
[div][nothing][nothing]
[div][nothing][nothing]
[div][nothing][nothing]
[div][nothing][nothing]

but what I want is
[div][div][div]
[div][div][div]

how do I fix this??
html

   echo '        <section class="py-5">
    <div class="container1 px-4 px-lg-5 mt-5">
        <div class=" justify-content-center">
            <div class="col mb-5">
                <div class="card h-100">
                    <!-- Product image dit kan later nog wel-->
                    <div class="fw-image">
                        <img class="card-img-top" src="brood.webp" alt="..." />
                    </div>
                    <!-- Product details-->
                    <div class="card-body p-4">
                        <div class="text-center">
                            <div class="test1">
                            <input type="hidden" name="broodjes_ID" value='. $row['broodjes_ID'] . '/>
                            </div>
                            <!-- Product name-->
                            <div class="test3">
                                <input type="hidden" name="broodnaam" value='. $row['broodnaam'] . '/>
                                <h5 class="fw-bolder">'.$row['broodnaam']. '</h5>
                            </div>
                            <!-- Product price-->
                            <div class="test2">
                                <input type="hidden" name="broodnaam" value='. $row['prijs'] . '/>
                                <h3> Prijs:  </h3>   <h3 class="fw-price"> €'.$row['prijs']. '</h3><br>
                            </div>
                            <!--voorraad-->
                            ';
                            if($row['voorraad'] == 0){
                                echo '<h3 class="fw-voorraad" style="color: red;"> uitverkocht</h3><br>';
                            }else{
                                //link die misschien kan helpen https://www.withinweb.com/info/a-shopping-cart-using-php-sessions-code/
                                $broodjes = $row['broodjes_ID'];
                                echo ' Voorraad: '.$row['voorraad'].'<br>
                                </div>
                                </div>
                                <!-- Product actions-->

                                <form action="cart.php?broodjes_ID='. $broodjes.'" method="POST" name="broodjes"  value=""
                                    <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
                                        <div class="text-center"><button class="btn btn-outline-dark mt-auto shop-item-button" type="submit" name="add_to_cart">Bestellen</button></div>
                                    </div>
                                </form>
                            ';
                        }

                echo '</div>
            </div>
        </div>
    </div>
</section>';


}

css

header{
           background-image: url("brood.jpg");
       }
       body {
       font-family: Arial, Helvetica, sans-serif;
       font-size: 20px;
       }
       .container1 {
           display: grid;
           grid-template-columns: repeat(3, 1fr);
           grid-template-rows: repeat(1, 1fr);
           grid-column-gap: 10px;
           grid-row-gap: 10px;
           }
        section{
           background-color: orange;
       }

       #myBtn {
       display: none;
       position: fixed;
       bottom: 20px;
       right: 30px;
       z-index: 99;
       font-size: 18px;
       border: none;
       outline: none;
       background-color: black;
       color: white;
       cursor: pointer;
       padding: 25px;
       border-radius: 50px;
       }

       #myBtn:hover {
       background-color: #555;
       }

What I have tried:

creating new divs
change the grid templates
used browser inspecting
looked it up on the internet

tried this

.container1 {
    display: grid;
    grid-template-columns: repeat(3, 1fr 1fr 1fr);
    grid-template-rows: repeat(1, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    }

jsut adds more empty col