css grid on while loop results

I want to use css grid to put all my while results next to each other. there can only be 3 items next to each other before they drop down. Right now I have this :

I want them all next to each other like this [div][div][div] how do I fix this? I have been trying to many things such as adding grid to the section/container and test divs but none of them put the divs next to each other. been trying to look this up but I only find them for none loops. can someone help me?

    <style>
    header{
        background-image: url("brood.jpg");
    }
    body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    }
    /* .container1{
        display: grid;
        grid-template-columns: auto 1fr 1fr 1fr;
       
        grid-column-gap: 10px;
        grid-row-gap: 10px;
    } */
    .test{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
       
        grid-column-gap: 0px;
        grid-row-gap: 0px;
    }
     section{
        /* display: grid;
        grid-template-columns: 1fr 1fr 1fr;
       
        grid-column-gap: 10px;
        grid-row-gap: 10px; */
         /* display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        grid-auto-rows: minmax(100px, auto); */
        background-color: orange;
        /* dit doet niks */
        /* grid-column: 1;
        grid-row: 2 / 5; */
    }

    #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;
    }

</style>
<body>
    
    <!-- Navigation-->
    <?php include "navbar.php"; ?>
    <?php if(isset($_SESSION['USER_ID'])){ ?>
    <!-- Header-->
    <header class="bg-dark py-5">
        <div class="container px-4 px-lg-5 my-5">
            <div class="text-center text-white"> <!--Het werkt -->
                <h1 class="display-4 fw-bolder">Goedemorgen, <?php echo $_SESSION['USERNAME'];?></h1>
                <p class="lead fw-normal text-white mb-0">Quantity kan nog niet veranderd worden.</p>
            </div>
        </div>
    </header>
    <?php
    } else {
    ?>
            <!-- Header-->
            <header class="bg-dark py-5">
        <div class="container px-4 px-lg-5 my-5">
            <div class="text-center text-white"> <!--het werkt-->
                <h1 class="display-4 fw-bolder">Goedemorgen, Gast</h1>
                <p class="lead fw-normal text-white mb-0">Quantity kan nog niet veranderd worden.</p>
            </div>
        </div>
    </header>
    <?php 
    } 
    ?>
    <!--miscchien dit toch in een whileloop gooien dat zal ook de code korter maken-->
    <!-- Section-->
    <button onclick="topFunction()" id="myBtn" title="Go to top">&#8593;</button> 
    <!-- <div class="wrapper">
        
            <input placeholder="broodjes naam" type="text" id="search" onkeydown="key_down()">
            <input type="button" value="Go" onclick="search(document.getElementById('search').value)">
    </div> -->
    <div class="wrapper">
        <div class="input-group">
            <input type="search" class="form-control rounded" id="search" placeholder="Search" aria-label="Search" aria-describedby="search-addon" onkeydown="if(event.keyCode == 13) document.getElementById('buttonSearch').click()"/>
            <button type="button" id="buttonSearch" class="btn btn-outline-primary" onclick="search(document.getElementById('search').value)">search</button>
        </div>
    </div>
    <?php 
    
    include "config.php";

    $sql  = 'SELECT * FROM broodjes';
    $stmt = $conn->prepare($sql); 
    $stmt->execute();
    $result = $stmt->get_result(); // get the mysqli result

    // styling voor class="justify-content-center als het nog nodig is: "row gx-4 gx-lg-5 row-cols-2 row-cols-md-3 row-cols-xl-4" "
    
    // maar als je test hier gooit  dan pakt hij alleen de eerste
    //echo '<div class="test">';
    while($row = mysqli_fetch_assoc($result)){
        echo '<div class="test">';
        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>
    </div>';                           
    echo '</div>';                       
    
    }