selamlar herkese, bir arayüzde bulunan görsel, başlık, içerik ve fiyat verilerini veritabanından çekip, html & css temanın stilini bozmadan direkt listelemek istiyorum ve veri eklendikçe ilgili alana listelemeye devam etmesini istiyorum. Verileri çekebiliyorum ama temanın görsel yapısını bozuyorum haliyle stediğim sonuca varamadım. En kolay nasıl çözümleyebilirim?

listeleme yapmak için kullandığım php kodu:

    <ul>
        <?php foreach ($veriler as $veri): ?>
            <li>
                <img src="<?php echo $veri['foto']; ?>" alt="Fotoğraf" style="max-width: 100px; max-height: 100px;">
                <h3><?php echo $veri['baslik']; ?></h3>
                <p><?php echo $veri['icerik']; ?></p>
                <p>Fiyat: <?php echo $veri['fiyat']; ?></p>
            </li>
        <?php endforeach; ?>
    </ul>

aşağıdaki gibi ilgili alanlara düzenli olarak veri çekmek istediğim kod

 <div class="row gutters-sm">
                                        <div class="col-lg-4 col-6">
                                            <!-- Menu Item -->
                                            <div class="menu-item menu-grid-item">
                                                <img class="mb-4" src="gorsel.jpg" alt="">
                                                <h6 class="mb-0">Başlık</h6>
                                                <span class="text-muted text-sm">içerik</span>
                                                <div class="row align-items-center mt-4">
                                                    <div class="col-sm-6"><span class="text-md mr-4"><span class="text-muted">fiyat</span> <span data-product-base-price>9.00</span></span></div>
                                                    <div class="col-sm-6 text-sm-right mt-2 mt-sm-0"><button class="btn btn-outline-secondary btn-sm" data-action="open-cart-modal" data-id="1"><span>İşlem</span></button></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-4 col-6">
                                            <!-- Menu Item -->
                                            <div class="menu-item menu-grid-item">
                                                <img class="mb-4" src="gorsel.jpg" alt="">
                                                <h6 class="mb-0">Başlık 2</h6>
                                                <span class="text-muted text-sm">içerik 2</span>
                                                <div class="row align-items-center mt-4">
                                                    <div class="col-sm-6"><span class="text-md mr-4"><span class="text-muted">fiyat 2</span> <span data-product-base-price>9.00</span></span></div>
                                                    <div class="col-sm-6 text-sm-right mt-2 mt-sm-0"><button class="btn btn-outline-secondary btn-sm" data-action="open-cart-modal" data-id="1"><span>İşlem</span></button></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-4 col-6">
                                            <!-- Menu Item -->
                                            <div class="menu-item menu-grid-item">
                                                <img class="mb-4" src="gorsel.jpg" alt="">
                                                <h6 class="mb-0">Başlık 3</h6>
                                                <span class="text-muted text-sm">içerik 3</span>
                                                <div class="row align-items-center mt-4">
                                                    <div class="col-sm-6"><span class="text-md mr-4"><span class="text-muted">fiyat 3</span> <span data-product-base-price>9.00</span></span></div>
                                                    <div class="col-sm-6 text-sm-right mt-2 mt-sm-0"><button class="btn btn-outline-secondary btn-sm" data-action="open-cart-modal" data-id="3"><span>İşlem</span></button></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-4 col-6">
                                            <!-- Menu Item -->
                                            <div class="menu-item menu-grid-item">
                                                <img class="mb-4" src="gorsel.jpg" alt="">
                                                <h6 class="mb-0">Başlık 4</h6>
                                                <span class="text-muted text-sm">içerik 4</span>
                                                <div class="row align-items-center mt-4">
                                                    <div class="col-sm-6"><span class="text-md mr-4"><span class="text-muted">fiyat 4</span> <span data-product-base-price>9.00</span></span></div>
                                                    <div class="col-sm-6 text-sm-right mt-2 mt-sm-0"><button class="btn btn-outline-secondary btn-sm" data-action="open-cart-modal" data-id="3"><span>İşlem</span></button></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

Aşağıda bulunan görseldeki gibi listeleme yapmak istiyorum ve veritabanına kayıt yaptıkça sitenin style ı bozulmadan eklenmesini istiyorum.