Merhaba,
ürünleri döngü içerisinde listelettiriyorum ve yazdırıyorum. Ancak tabloda oldukları için her ne kadar veri gelirse gelsin ufaltarak yan yana ekliyor. Bunu nasıl max 4 lü yan yana gelecek, ardından alta geçecek şekilde veya kullanıcının ekran boyutuna göre uygun biçimde yan yana listelenecek ve max bir kutu 300px boyutunda olacak şekilde ayarlayabilirim?

Kodlarım:

<?php
                                    $db->exec("SET names utf8");
                                    $sqlQuery = "SELECT * FROM market_urunler ORDER BY id ASC LIMIT 100";
                                    $statement2 = $db->prepare($sqlQuery);
                                    $statement2->execute(array(':id' => $id));
                                    while($rs2 = $statement2->fetch()){
                                        $market_id = $rs2['id'];
                                        $market_urun_adi = $rs2['urun_adi'];
                                        $market_urun_aciklama = $rs2['urun_aciklama'];
                                        $market_urun_resim = $rs2['urun_resim'];
                                        $market_urun_fiyat = $rs2['urun_fiyat'];
                                    ?>

<div class="col">
                        <div class="card shadow mb-4" style="max-width: 300px;">
                                <div class="card-header d-flex justify-content-between align-items-center" style="background: rgb(127 127 129 / 75%);border-style: none;color: #2464fc;filter: drop-shadow(0px 3px 26px rgba(0, 0, 0, 0.09));font-family: 'Open Sans', sans-serif;font-weight: 400;/* border-radius: 50px; */box-shadow: none;">
                                    <h6 class="m-0" style="color: #f7f7f7;font-family: 'Open Sans', sans-serif;font-weight: 400;font-size: 20px;"><b><font color="#f7f7f7"><?php echo $market_urun_adi; ?></font></b></h6>
                                </div><div class="ribbon"><span class="ribbon__content"><?php echo $market_urun_fiyat; ?> TL</span></div>
                                <div class="card-body" <?php if($wonderminer_theme == "dark"){ echo 'style="background-color: #5c5c5c;"';}?>>
                                    
                                    <img style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); max-width: 300px; margin: auto; text-align: center; width:100%; border-radius:3px;" src="<?php if(!empty($market_urun_resim)){ echo $market_urun_resim; }else{ echo "./marketresim/resim-yok.png"; } ?>" oncontextmenu="if (!window.__cfRLUnblockHandlers) return false; if (!window.__cfRLUnblockHandlers) return false; return false" onselectstart="if (!window.__cfRLUnblockHandlers) return false; if (!window.__cfRLUnblockHandlers) return false; return false" ondragstart="if (!window.__cfRLUnblockHandlers) return false; if (!window.__cfRLUnblockHandlers) return false; return false">
                                    <hr>
                                    <?php echo $market_urun_aciklama; ?>
                                    <br><br>
                                    <button name="copyref" style="border-radius: 3px; width: 100%" id="copyref" class="btn btn-primary">Satın Al</button>
                                    
                                </div>
                            </div>
</div>
<?php } ?>

Teşekkürler