Click here to Skip to main content
15,917,177 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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
CSS
.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
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
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
CSS
.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
Posted
Updated 16-Mar-22 0:27am
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900