<div class="items"></div>
.items{
  display: flex;
  justify-content: space-around;
}

img{
  display: block;
  width: 140px;
  height: 150px;
}

.items div{
  text-align: center;
  border: 1px solid #ccc;
  padding: 4px;
}
let parent = document.querySelector(".items");

let units = [{
  "image": "https://im0-tub-kz.yandex.net/i?id=d8f146ffd72ad3ad74aa0a7d30a79e82&n=13&exp=1",
  "name":  "iphone 6",
  "price": "$200",
},{
  "image": "https://www.hardwareluxx.ru/images/cdn01/E39DA3FE88B24CC9AA35003A8035E70B/img/DD33455A05B9440C8C7199EF6EF82995/apple_iphone8_product_red_00002_DD33455A05B9440C8C7199EF6EF82995.jpg",
  "name": "iphone7",
  "price": "$400",
},{
  "image": "https://i.pinimg.com/originals/d6/59/0a/d6590a0b654ba020d2cd61dfc5c31944.jpg",
  "name" : "iphone 8",
  "price": "$500",
},{
  "image": "https://avatars.mds.yandex.net/get-pdb/2111302/c75957b4-10f8-464f-bdd0-df6c80a58227/s1200",
  "name": "iphone XS",
  "price": "$2000",
}];

for(item in units){
      let block = document.createElement("div");
      let goo = "";
      goo += `<img src="${units[item].image}" alt="${units[item].name}">`;
      goo += `<h3>${units[item].name}</h3>`;
      goo += `<p>${units[item].price}</p>`;
      goo += `<button>Купить</button>`;
      block.innerHTML = goo;
      parent.append(block);
}



External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.