<div class="container">
  <header class="intro">
    <h1>Masonry grid with CSS</h1>
    <p>Goodbye JavaScript, let's embrace this beautiful CSS feature!</p>
    <p><a href="https://utilitybend.com/blog/masonry-with-css-grid-finally-a-solution-without-javascript" target="_blank">Read more about it on my blog</a></p>
  </header>
  <section class="grid">
    <article class="card-clickable">
      <header>
        <h2><a href="https://utilitybend.com" target="_blank" class="card-action">Some article we want to show</a></h2>
        <time datetime="2020-10-07">07/10/2020</time>
      </header>
      <figure>
        <img src="https://unsplash.it/800/400/?random" alt="" />
      </figure>
      <main>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis sodales erat vel accumsan. Nam eget massa nec sem vulputate ullamcorper vel quis justo. Duis rhoncus tempor tempus...</p>
      </main>
      <footer>
        <span class="read-more">Read more</span>
      </footer>
    </article>
    <article class="card-clickable">
      <header>
        <h2><a href="https://utilitybend.com" target="_blank" class="card-action">Some article we want to show witha longer title than the other</a></h2>
        <time datetime="2020-10-05">05/10/2020</time>
      </header>
      <figure>
        <img src="https://unsplash.it/800/230/?random" alt="" />
      </figure>
      <main>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis sodales erat vel accumsan. Nam eget massa nec sem vulputate ullamcorper vel quis justo. Duis rhoncus tempor tempus. Nulla facilisi. Maecenas nulla ante, lacinia ac consectetur non, aliquet sollicitudin libero. Quisque congue odio sodales dui fermentum ac laoreet mauris eleifend. Nulla facilisi. Phasellus vel erat a ante pharetra pharetra.</p>
      </main>
      <footer>
        <span class="read-more">Read more</span>
      </footer>
    </article>
    <article class="card-clickable">
      <header>
        <h2><a href="https://utilitybend.com" target="_blank" class="card-action">Some article we want to show and another title</a></h2>
        <time datetime="2020-10-01">01/10/2020</time>
      </header>
      <figure>
        <img src="https://unsplash.it/800/370/?random" alt="" />
      </figure>
      <main>
        <p>Donec fringilla sem at eros vulputate tempus. Maecenas interdum leo a tortor lobortis in hendrerit est pellentesque. Vestibulum non leo et nisi sollicitudin rutrum. Aliquam tristique dui tempor sapien molestie mollis. Integer viverra faucibus nulla ut posuere. Sed quis dui dictum tortor imperdiet imperdiet ut scelerisque augue. Aenean sit amet libero sit amet metus pulvinar viverra et id tortor. Nulla iaculis bibendum nisi, quis elementum risus tempus et. Nullam rutrum, dolor id vulputate feugiat, lectus tortor auctor odio, et lacinia eros neque quis neque. Praesent nibh erat, varius porttitor cursus a, condimentum vel eros. Quisque odio urna, elementum a consequat id, facilisis eget mi. Praesent imperdiet congue velit, non tempus mi sollicitudin eu. </p>
      </main>
      <footer>
        <span class="read-more">Read more</span>
      </footer>
    </article>
    <article class="card-clickable">
      <header>
        <h2><a href="https://utilitybend.com" target="_blank" class="card-action">Some article we want to show</a></h2>
        <time datetime="2020-09-20">20/09/2020</time>
      </header>
      <figure>
        <img src="https://unsplash.it/800/800/?random" alt="" />
      </figure>
      <main>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis sodales erat vel accumsan...</p>
      </main>
      <footer>
        <span class="read-more">Read more</span>
      </footer>
    </article>
  <article class="card-clickable">
      <header>
        <h2><a href="https://utilitybend.com" target="_blank" class="card-action">Some article we want to show</a></h2>
        <time datetime="2020-09-07">07/09/2020</time>
      </header>
      <figure>
        <img src="https://unsplash.it/800/399/?random" alt="" />
      </figure>
      <main>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis sodales erat vel accumsan. Nam eget massa nec sem vulputate ullamcorper vel quis justo. Duis rhoncus tempor tempus...</p>
      </main>
      <footer>
        <span class="read-more">Read more</span>
      </footer>
    </article>
    <article class="card-clickable">
      <header>
        <h2><a href="https://utilitybend.com" target="_blank" class="card-action">Some article we want to show witha longer title than the other</a></h2>
        <time datetime="2020-09-04">04/09/2020</time>
      </header>
      <figure>
        <img src="https://unsplash.it/800/650/?random" alt="" />
      </figure>
      <main>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis sodales erat vel accumsan. Nam eget massa nec sem vulputate ullamcorper vel quis justo. Duis rhoncus tempor tempus. Nulla facilisi. Maecenas nulla ante, lacinia ac consectetur non, aliquet sollicitudin libero. Quisque congue odio sodales dui fermentum ac laoreet mauris eleifend. Nulla facilisi. Phasellus vel erat a ante pharetra pharetra.</p>
      </main>
      <footer>
        <span class="read-more">Read more</span>
      </footer>
    </article>
    
    <article class="card-clickable">
      <header>
        <h2><a href="https://utilitybend.com" target="_blank" class="card-action">Some article we want to show</a></h2>
        <time datetime="2020-09-01">01/09/2020</time>
      </header>
      <figure>
        <img src="https://unsplash.it/800/780/?random" alt="" />
      </figure>
      <main>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis sodales erat vel accumsan...</p>
      </main>
      <footer>
        <span class="read-more">Read more</span>
      </footer>
    </article>
    <article class="card-clickable">
      <header>
        <h2><a href="https://utilitybend.com" target="_blank" class="card-action">Some article we want to show</a></h2>
        <time datetime="2020-08-018">18/08/2020</time>
      </header>
      <figure>
        <img src="https://unsplash.it/800/350/?random" alt="" />
      </figure>
      <main>
        <p>Donec fringilla sem at eros vulputate tempus. Maecenas interdum leo a tortor lobortis in hendrerit est pellentesque. Vestibulum non leo et nisi sollicitudin rutrum.</p>
      </main>
      <footer>
        <span class="read-more">Read more</span>
      </footer>
    </article>
  </section>
</div>

/* Some default styling first */
body {
  font-family: 'Lato', sans-serif;
  font-size: 1.2rem;
  line-height: 1.5;
  color: #FEFEFE;
  background: #1f2937;
}

.intro {
  padding: 48px 0 48px 24px;
  font-size: 1.5rem;
}

h1, h2 {
  margin: 0;
  font-family: 'Merriweather', serif;
  font-size: 2rem;
}

h2 {
  font-size: 1.7rem;
  line-height: 1.1;
}

p {
  margin: 0;
}

a {
  color: darkorange;
}

.container {
  max-width: 1800px;
  margin: 0 auto;
  padding: 0 15px;
}

img {
  max-width: 100%;
}

/* article styling */
article {
  color: #1e2432;
  background: #FFF;
  border-radius: 8px;
  cursor: pointer;
  transition: all .24s ease-in-out;
}

article:hover {
  transform: scale(1.023);
  box-shadow: rgba(0, 0, 0, 0.5) 0px 25px 50px -12px;
}

article > * {
  padding: 20px;
}

article figure {
  margin: 0;
  padding: 0;
}

article footer {
  text-align: right;
  border-top: 1px solid #6b7280;
}

h2 a {
  color: #1e2432;
  text-decoration: none;
}

time {
  margin: 0;
  color: #6b7280;
  font-size: 1rem;
}

.read-more {
  color: #bc5200;
  text-decoration: none;  
}

.read-more:hover, .read-more:active {
  text-decoration: underline;  
}

/* The masonry grid */
.grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: masonry;
}

@media screen and (min-width: 680px) {
  /* set the grid to 2 columns */
  .grid {  
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (min-width: 768px) {
  /* set the grid to 2 columns */
  .grid {  
    gap: 18px;
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (min-width: 1200px) {
  /* set the grid to 2 columns */
  .grid {  
    gap: 24px;
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (min-width: 1600px) {
  .intro {
    text-align: center;
  }
  
  /* set the grid to 3 columns */
  .grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

const clickableCards = e => {
        const target = e.target;
        // If a regular click was clicked, do nothing
        if (target.tagName === 'A' || target.tagName === 'BUTTON') {
            return;
        }

        const card = target.closest('.card-clickable');
        if (card) {
            const cardAction = card.querySelector('.card-action');
            if (cardAction) {
                if (cardAction.getAttribute("target") === "_blank") {
                    window.open(cardAction.href, '_blank');
                } else {
                    cardAction.click();
                }

            } else if (card.dataset.href) {
                redirect(e, card.dataset.href);
            }
        }
    };

    document.addEventListener('keypress', clickableCards);
    document.addEventListener('click', clickableCards);