arraydeki verileri div olarak ekrana yazdırma

objemdeki product bilgilerini alttaki div ile her bir .shop-line a 2 tane .shop-item gelecek şekilde ekranda göstermek istiyorum nasıl yapabilirim?

yani 4 tane productım olduğu için, her birine 2 product gelecek şekilde 2 tane .shop-line oluşacak, ama product sayım 5 veya 6 olursa 3. .shop-line** oluşacak

<div id="shop-items-container">

	<div class="shop-line">
	</div>

</div>

let products = [
  {
    image: 'url',
    name: 'elma',
    price: 15000,
    description: 'yeşil',
  },
  {
    image: 'url',
    name: 'araba',
    price: 150000,
    description: 'beyaz',
  },
  {
    image: 'url',
    name: 'klavye',
    price: 150,
    description: 'siyah',
  },
  {
    image: 'url',
    name: 'telefon',
    price: 150,
    description: 'mor',
  },
];

let div = `
  <div class="shop-item">
    <img class="item-image" src=`$(url)`>

    <div class="top-class">
      <p class="item-name">`$(name)`</p>
      <p class="item-price">`$(price)`</p>
    </div>

    <p class="item-description">`$(description)`</p>
  </div>
`;

umarım anlatabilmişimdir :(

const itemsContainer = document.getElementById('shop-items-container') // container ı seç let d; products.forEach(function(x, i){ if (i % 2 == 0){ // burada arrayin index numarası çift sayı ise | 0, 2, 4, 6 gibi yeni bir div oluşturup class olarakta 'shop-line' atıyoruz d = document.createElement('div') d.classList.add('shop-line') } // innerHTML ile veriyi oluşturulan div e ekliyoruz d.innerHTML += `<div class="shop-item"> <img class="item-image" src="${x.image}"> <div class="top-class"> <p class="item-name">${x.name}</p> <p class="item-price">${x.price}</p> </div> <p class="item-description">${x.description}</p> </div>`; if (i % 2 != 0 || i == products.length - 1){ // index numarası tek ise veya arrayin son elemanıysa container içerisine oluşturulan divi ekliyoruz. itemsContainer.appendChild(d) } })