<div class="article"></div>
.article{
 column-count: 3;
}

.item{
  background: #fafafa;
  display: inline-block;
  padding: 6px;
  margin-top: 10px;
  cursor: pointer;
}

.item img{
  display: block;
  width: 100%;
}

p{
  font-size:10px;
}
let articles = document.querySelector(".article");

let bases = [
  {
    img: "http://placehold.it/200x230",
    head: "Mellany Griffit",
    bio: "This page shares my best articles to read on topics like health, happiness, creativity, productivity and more."
  },{
    img: "http://placehold.it/200x200",
    head: "Anton Shelton",
    bio: "The central question that drives my work is, “How can we live better?” "
  },{
    img: "http://placehold.it/200x100",
    head: "Little Bitch",
    bio: "You’ll find interesting articles to read on topics like how to stop procrastinating as well as personal recommendations like my list of the best books to read and my minimalist travel guide. Ready to dive in?"
  },{
    img: "http://placehold.it/200x150",
    head: "Kite Minoge",
    bio: "You’ll find interesting articles to read on topics like how to stop  of the best books to read and my minimalist travel guide. Ready to dive in?"
  },{
    img: "http://placehold.it/200x270",
    head: "John Travolta",
    bio: "Let's define behavioral psychology. Behavioral psychology is the study of the connection between our minds and our behavior"
  },{
    img: "http://placehold.it/200x180",
    head: "Alex Cooln",
    bio: "The hope is that if we can use behavioral psychology to help us predict how humans will behave, we can build better habits as individuals, create better products as companies, and develop better living spaces as communities"
  },{
    img: "http://placehold.it/200x110",
    head: "Alexa Petukh",
    bio: "Let's talk about how to apply behavioral psychology to your daily life. In each of the articles below, I break down some behavioral psychology research and share practical ways to put it to use in our daily lives"
  },{
    img: "http://placehold.it/200x80",
    head: "Samuel Oraquel",
    bio: "Looking for more articles explaining how to apply behavioral psychology principles in practical ways? I have a full list at the bottom of this page"
  },{
    img: "http://placehold.it/200x320",
    head: "Jason Vurhies",
    bio: "This is a complete list of articles I have written on behavioral psychology. Enjoy!"
  },{
    img: "http://placehold.it/200x200",
    head: "Mochelle Jarre",
    bio: "For a long time, researchers and economists believed that humans made logical, well-considered decisions. In recent decades, however"
  },{
    img: "http://placehold.it/200x290",
    head: "Mochelle Jarre",
    bio: "Psychologists and behavioral researchers love to geek out about these different mental mistakes. There are dozens of them and they all have fancy names like “mere exposure effect” or “narrative fallacy"
  }
];

let out = "";
for(article in bases){
  out+=  `<div class="item">`;
  out+= `<img src="${bases[article].img}">`;
  out+= `<h3>${bases[article].head}</h3>`;
  out+= `<p>${bases[article].bio}</p>`;
  out+= `</div>`;
}

articles.innerHTML = out;

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.