<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);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.