Style bozulmadan listeleme hk. (Yardım)

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.

Html etiketlerini de foreach içerisine döngüye gömün

hocam tam nerden etiket içerisine almam gerekiyor? çünkü nereden eklersem ekleyim stili hep bozuluyor.

Tüm kodu görmeden yorum yapmak doğru olmaz, şu an yaptığınız foreach döngüsü ile kaç adet veri varsa o kadar <li> etiketi döndürüyorsunuz buraya kadar doğru fakat css tarafında buna uygun olmayan satır sütün bölümleri yapılmış olabilir. Ayrıca foreachı { } ile kullanmanızı tavsiye ederim endforeach kullanmak yerine. Kolay gelsin.

Çok teşekkür ederim hocam, sorun çözüldü