<div class="parent"></div>

.parent{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
  width: 100%;
}

.unit{
  text-align: center;
  padding: 5px;
  border: 1px solid #ccc;
}

p{
  font-size: 12px;
  max-width: 200px;
  margin: auto;
}

img{
  display: block;
  max-width: 100%;
  margin: auto;
}
let parent = document.querySelector(".parent");
let mass = [];

mass[0] = {
  "h3" : "Название 1",
  "img" : "http://placehold.it/200",
  "article" : "Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum iste eaque enim cumque ex optio vel culpa consequuntur? Nihil, dolorum.",
  "link" : "page1.html"
}

mass[1] = {
  "h3" : "Название 2",
  "img" :"http://placehold.it/200",
  "article" : "Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum iste eaque enim cumque ex optio vel culpa consequuntur? Nihil, dolorum.",
  "link" : "page2.html"
}

mass[2] = {
  "h3" : "Название 3",
  "img" : "http://placehold.it/200",
  "article" : "Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum iste eaque enim cumque ex optio vel culpa consequuntur? Nihil, dolorum.",
  "link" : "page3.html"
}

mass[3] = {
  "h3" : "Название 4",
  "img" : "http://placehold.it/200",
  "article" : "Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum iste eaque enim cumque ex optio vel culpa consequuntur? Nihil, dolorum.",
  "link" : "page4.html"
}

mass[4] = {
  "h3" : "Название 5",
  "img" : "http://placehold.it/200",
  "article" : "Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum iste eaque enim cumque ex optio vel culpa consequuntur? Nihil, dolorum.",
  "link" : "page5.html"
}

for(key in mass){
  let h2 = document.createElement("h2");
      h2.innerHTML = mass[key].h3;
  let img = document.createElement("img");
      img.setAttribute("src", mass[key].img);
  let p = document.createElement("p");
      p.innerHTML = mass[key].article;
  let link = document.createElement("a");
      link.setAttribute("href", mass[key].link);
      link.innerHTML = mass[key].link;
  let unit = document.createElement("div");
      unit.classList.add("unit");
  
  unit.appendChild(h2);
  unit.appendChild(img);
  unit.appendChild(p);
  unit.appendChild(link);
  
  parent.append(unit);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.