JSFiddle - React, Tailwind, and code Playground

HTML

<div class="gallery masonry-layout" id="gallery">
  <div class="gallery-item">
    <img src="https://picsum.photos/450/325?image=100" alt="" class="">
  </div>
  <div class="gallery-item">
    <img src="https://picsum.photos/450/450?image=200" alt="" class="">
  </div>
  <div class="gallery-item">
    <img src="https://picsum.photos/450/280?image=300" alt="" class="">
  </div>
  <div class="gallery-item">
    <img src="https://picsum.photos/450/540?image=400" alt="" class="">
  </div>
  <div class="gallery-item">
    <img src="https://picsum.photos/450/380?image=500" alt="" class="">
  </div>
  <div class="gallery-item">
    <img src="https://picsum.photos/450/300?image=600" alt="" class="">
  </div>
  <div class="gallery-item">
    <img src="https://picsum.photos/450/400?image=700" alt="" class="">
  </div>
  <div class="gallery-item">
    <img src="https://picsum.photos/450/300?image=800" alt="" class="">
  </div>
  <div class="gallery-item">
    <img src="https://picsum.photos/450/280?image=900" alt="" class="">
  </div>
  <div class="gallery-item">
    <img src="https://picsum.photos/450/480?image=925" alt="" class="">
  </div>
  <div class="gallery-item">
    <img src="https://picsum.photos/450/550?image=950" alt="" class="">
  </div>
  <div class="gallery-item">
    <img src="https://picsum.photos/450/600?image=1000" alt="" class="">
  </div>
  <div class="gallery-item">
    <img src="https://picsum.photos/450/325?image=25" alt="" class="">
  </div>
  <div class="gallery-item">
    <img src="https://picsum.photos/450/450?image=50" alt="" class="">
  </div>
  <div class="gallery-item">
    <img src="https://picsum.photos/450/280?image=75" alt="" class="">
  </div>
  <div class="gallery-item">
    <img src="https://picsum.photos/450/540?image=100" alt="" class="">
  </div>
  <div class="gallery-item">
    <img src="https://picsum.photos/450/380?image=125" alt="" class="">
  </div>
  <div class="gallery-item">
    <img...

CSS

.gallery-item img {
  max-width: 100%;
  display: block;
}
.masonry-layout {
  --columns: 1;
  --gap: 0.6rem;
  columns: var(--columns);
  grid-gap: var(--gap);
}
.masonry-layout .masonry-item {
  margin-bottom: var(--gap);
  display: inline-block;
}

@media only screen and (min-width: 300px) {
  .masonry-layout {
    --columns: 2;
  }
}

@media only screen and (min-width: 500px) {
  .masonry-layout {
    --columns: 3;
  }
}

@media only screen and (min-width: 800px) {
  .masonry-layout {
    --columns: 4;
  }
}

@media only screen and (min-width: 1000px) {
  .masonry-layout {
    --columns: 5;
  }
}