如何更改 CSS 中的默认布局？

Question

While rendering the images in the webpage, their layout doesn't follow the normal grid but the following one:

Considering I have used Bootstrap as a framework, I applied a double class styling (note the child and parent classes) but it didn't change the alignment. Is there a way I can align the cells so that each one of them occupies the same space and the layout is rectangular rather than pyramidal?

while ($row = mysqli_fetch_array($result)) {

 ?>
    <div class="col-md-3 parent">

       <form method="post" action="shporta.php?action=add&serial=<?php echo $row["Nr_Seri"]; ?>">

         <div class="product child" >
               <img src="img\\<?php echo $row["URL"]; ?>" class="img-responsive">
               <h5 class="text-info"><?php echo $row["titulli"]; ?></h5>
               <h5 class="text-danger"><?php echo $row["Cmimi"]; ?></h5>
               <input type="text" name="quantity" class="form-control" value="1">
               <input type="hidden" name="hidden_name" value="<?php echo $row["titulli"]; ?>">
               <input type="hidden" name="hidden_price" value="<?php echo $row["Cmimi"]; ?>">
               <input type="submit" name="add" style="margin-top: 5px;" class="btn btn-success"value="Shto ne Shporte"> 
           </div>
       </form>
 </div>              

.col-md-3.parent{
    display: flex;
    flex-wrap: wrap;
}

.product.child{
    flex-grow: 1;
    flex-basis: 25%;
}

Answer 1

I think you can change the display from flex to display grid.

.col-md-3.parent{
    display: grid;
    flex-wrap: wrap;
}

A Complete Guide to Grid