How to make use of it:

1. The primary HTML structure for the masonry format.

<section class="masonry">
  <div class="masonry-item cell cell-1">
    // Add Image Here
  </div>
  <div class="masonry-item cell cell-2">
    // Add Image Here
  </div>
  <div class="masonry-item cell cell-3">
    // Add Image Here
  </div>
  <div class="masonry-item cell cell-4">
    // Add Image Here
  </div>
  <div class="masonry-item cell cell-5">
    // Add Image Here
  </div>
  <div class="masonry-item cell cell-6">
    // Add Image Here
  </div>
  <div class="masonry-item cell cell-7">
    // Add Image Here
  </div>
  <div class="masonry-item cell cell-8">
    // Add Image Here
  </div>  
  </div>
</section>

2. The main CSS types for the masonry format.

.masonry {
  background-color: #000324;
  width: 100%;
  height: 100vh;
  padding: 1rem;
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-template-rows: repeat(14, 1fr);
  row-gap: 1rem;
  column-gap: 1rem;
}

.cell-1 {
  grid-column: 1 / 6;
  grid-row: 1 / 6;
}


.cell-2 {
  grid-column: 6 / 9;
  grid-row: 1 / 11;
}

.cell-3 {
  grid-column: 9 / 12;
  grid-row: 1 / 4;
}

.cell-4 {
  grid-column: 12 / -1;
  grid-row: 1 / 4;
}

.cell-5 {
  grid-column: 1 / 4;
  grid-row: 6 / 11;
}

.cell-6 {
  grid-column: 4 / 6;
  grid-row: 6 / 7;
}

.cell-7 {
  grid-column: 4 / 6;
  grid-row: 7 / 11;
}

.cell-8 {
  grid-column: 1 / 6;
  grid-row: 11 / -1;
}

3. Make the format absolutely responsive.

/* Responsive */
/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
  .masonry {
    background-color: white;
    width: 100%;
    height: 100vh;
    padding: 1rem;
    display: flex;
    flex-flow: column;
  }
}

4. Auto resize the picture to suit the grid item.

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
  pointer-events: none;
}

Fluid Masonry Layout Using CSS Grid, Complex Masonry Plugin/Github

See Demo And Download