<div class="wrapper"></div>

.wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.card {
  max-width: 250px;
  margin: 10px;
  img {
    width: 100%;
    height: 200px;
    object-fit: cover;
  }
}

const items = [{title: 'Называние 1', img: 'https://vignette.wikia.nocookie.net/dragonage/images/7/72/%D0%9C%D0%BE%D1%80%D1%80%D0%B8%D0%B3%D0%B0%D0%BD_%28Inquisition%29.png/revision/latest?cb=20190607072255&path-prefix=ru'}, 
               {title: 'Называние 2', img: 'https://dpchas.com.ua/sites/default/files/styles/slideshow_large/public/users/user125/2_1.jpg?itok=uLixaO6N'}, 
               {title: 'Называние 3', img: 'https://www.dotafire.com/images/social/heroes/queen-of-pain.jpg'}, 
               {title: 'Называние 4', img: 'https://99px.ru/sstorage/56/2019/01/11701190829319413.jpg'}]

const wrapper = document.querySelector('.wrapper')

items.forEach(el => {
  let card = document.createElement('div')
  card.classList.add('card')
  card.innerHTML = `<h3>${el.title}</h3>
<img src="${el.img}" alt="">`
  wrapper.append(card)
})