<html>
<head>
  <style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
</style>
</head>
<body>
  <header class="main-header">
    <h1 class="project-title">Masonry-Like CSS Grid</h1>
  </header>
  <section class="post-grid-wrap">
    <div class="post-grid-container">
      <div class="post">
        <a href="#">
          <img src="https://picsum.photos/1600x900" alt="">
          <div class="post-text">
            <h2 class="post-title">Awesome Post</h2>
          </div>
        </a>
      </div>
        <div class="post">
        <a href="#">
          <img src="https://picsum.photos/800x600" alt="">
          <div class="post-text">
            <h2 class="post-title">Another Post</h2>
          </div>
        </a>
      </div>
        <div class="post">
        <a href="#">
          <img src="https://picsum.photos/800x600" alt="">
          <div class="post-text">
            <h2 class="post-title">A Cool Post</h2>
          </div>
        </a>
      </div>
        <div class="post">
        <a href="#">
          <img src="https://picsum.photos/800x600" alt="">
          <div class="post-text">
            <h2 class="post-title">Interesting Post</h2>
          </div>
        </a>
      </div>
        <div class="post">
        <a href="#">
          <img src="https://picsum.photos/800x600" alt="">
          <div class="post-text">
            <h2 class="post-title">Boring Post</h2>
          </div>
        </a>
      </div>
    </div>
  </section>
  <div class="load-more-wrap">
    <a class="load-more-btn btn">Load More</a>
  </div>
</body>
</html>
/*
** 
** Probably a better way to do this but here is my version of a post grid layout similar to a masonry layout. Work in progess.
*/

body {
  font-family: 'Roboto', sans-serif;
  display: flex;
  flex-direction: column;
  margin: 0 0 83px;
  scroll-behavior: smooth;
}

a {
  text-decoration: none;
  cursor: pointer;
}

a.btn {
  padding: .5rem 1.5rem;
  background: white;
  color: gray;
  font-weight: 500;
  border-radius: 20px;
  transition: all 150ms ease-in-out;
}

a.btn:hover {
  background: #000A52;
  color: white;
}

.main-header {
  position: relative;
  background: #1CB5E0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.project-title {
  margin: 1em auto;
  text-align: center;
  color: white;
  text-shadow: 2px 1px 4px rgb(0, 0, 0);
}

section.post-grid-wrap {
  background: linear-gradient(0deg, #000851 0%,  #1CB5E0 100%);
  background-repeat: no-repeat;
  padding: 1rem 0 3rem;
}

section.post-grid-wrap:nth-child(odd) {
  background: linear-gradient(0deg, #1CB5E0 0%,  #000851 100%);
}

/*
** Blog Post Grid
*/
.post-grid-container {
  display: grid;
  grid-template-columns: 1.5fr 1.5fr 2fr;
  grid-gap: 2%;
  max-width: 1200px;
  margin: 0 auto 3rem;
}

.post-grid-container .post {
  position: relative;
  border: none;
  overflow: hidden;
  margin-bottom: 0;
  background: transparent;
  -webkit-box-shadow: 3px 5px 8px -1px rgba(0, 0, 0, 0);
  -moz-box-shadow: 3px 5px 8px -1px rgba(0, 0, 0, 0);
  box-shadow: 3px 5px 8px -1px rgba(0, 0, 0, 0);
  transition: box-shadow .3s ease-in-out;
}

.post-grid-container .post:hover {
  -webkit-box-shadow: 3px 5px 8px -1px rgba(0,0,0,0.5);
  -moz-box-shadow: 3px 5px 8px -1px rgba(0,0,0,0.5);
  box-shadow: 3px 5px 8px -1px rgba(0,0,0,0.5);
}

.post-grid-container .post-text {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  padding: 0 20px;
}

.post a {
  color: white;
  text-shadow: 2px 1px 4px rgb(0, 0, 0);
}

.post img {
  opacity: 1;
  transform: scale(1.25);
  object-fit: cover;
  transition: all .9s ease-in-out;
}

.post:hover img {
  opacity: .25;
  transform: scale(1.2);
}

.post:nth-child(1) {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
  max-height: 400px;
}

.post:nth-child(1) img {
  transform: scale(1.15);
  margin-left: 3%;
}

.post:nth-child(1):hover img {
  transform: scale(1.1);
}

.post:nth-child(2) {
  grid-row-start: 1;
  grid-row-end: 3;
}

.post:nth-child(2) img {
  object-fit: cover;
  object-position: 50% 50%;
  min-height: 85%;
  transform: scale(1.5);
}

.post:nth-child(2):hover img {
  transform: scale(1.4);
}

.post:nth-child(3),
.post:nth-child(4) {
  max-height: 218px;
}

.post:nth-child(3) img,
.post:nth-child(4) img {
  min-height: 100%;
}

.post:nth-child(5) {
  grid-column-start: 1;
  grid-column-end: 4;
  max-height: 400px;
}

.post:nth-child(5) img {
  min-width: 1200px;
  transform: scale(1.1);

}

.post:nth-child(5):hover img {
  transform: scale(1.05);
}

@media all and (max-width: 992px) {

  .post-grid-container {
    display: block;
  }

  .post {
    height: 220px;
    margin-bottom: 5%;
  }

}


.load-more-wrap {
  background: #1CB5E0;
  display: flex;
  place-content: center;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 100;
}

.load-more-btn {
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}
$(".load-more-btn").click(function(){
  $(".post-grid-wrap:last-of-type").clone().appendTo("body");
  $('html, body').animate({
    scrollTop: $(window).scrollTop() + 400
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js