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">
<!--
<div class="fw-image">
<img class="card-img-top" src="brood.webp" alt="..." />
</div>
<!--
<div class="card-body p-4">
<div class="text-center">
<div class="test1">
<input type="hidden" name="broodjes_ID" value='. $row['broodjes_ID'] . '/>
</div>
<!--
<div class="test3">
<input type="hidden" name="broodnaam" value='. $row['broodnaam'] . '/>
<h5 class="fw-bolder">'.$row['broodnaam']. '</h5>
</div>
<!--
<div class="test2">
<input type="hidden" name="broodnaam" value='. $row['prijs'] . '/>
<h3> Prijs: </h3> <h3 class="fw-price"> €'.$row['prijs']. '</h3><br>
</div>
<!--
';
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>
<!--
<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