<div class="masonry-container">
    <div class="masonry-item">
        <div
            class="pseudo-img"
            style="height: 190px; background-color: red"
        >1</div>
    </div>
    <div class="masonry-item">
        <div
            class="pseudo-img"
            style="height: 580px; background-color: orange"
        >2</div>
    </div>
    <div class="masonry-item">
        <div
            class="pseudo-img"
            style="height: 240px; background-color: yellow"
        >3</div>
    </div>
    <div class="masonry-item">
        <div
            class="pseudo-img"
            style="height: 300px; background-color: chartreuse"
        >4</div>
    </div>
    <div class="masonry-item">
        <div
            class="pseudo-img"
            style="height: 720px; background-color: green"
        >5</div>
    </div>
    <div class="masonry-item">
        <div
            class="pseudo-img"
            style="height: 490px; background-color: cyan"
        >6</div>
    </div>
    <div class="masonry-item">
        <div
            class="pseudo-img"
            style="height: 270px; background-color: blue; color: white"
        >7</div>
    </div>
    <div class="masonry-item">
        <div
            class="pseudo-img"
            style="height: 620px; background-color: navy; color: white"
        >8</div>
    </div>
    <div class="masonry-item">
        <div
            class="pseudo-img"
            style="height: 130px; background-color: purple; color: white"
        >9</div>
    </div>
</div>

.masonry-container {
    --gap: 10px;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: var(--gap);
    grid-auto-rows: 10px;
}

@media screen and (max-width: 720px) {
    .masonry-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 400px) {
    .masonry-container {
        display: block;
    }

    .masonry-item {
        margin-bottom: var(--gap);
    }
}

/* ignore this */
.pseudo-img {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
}

function masonryLayout() {
    const masonryContainerStyle = getComputedStyle(
        document.querySelector(".masonry-container")
    );
    const columnGap = parseInt(
        masonryContainerStyle.getPropertyValue("column-gap")
    );
    const autoRows = parseInt(
        masonryContainerStyle.getPropertyValue("grid-auto-rows")
    );

    document.querySelectorAll(".masonry-item").forEach((elt) => {
        elt.style.gridRowEnd = `span ${Math.ceil(
            elt.querySelector(".pseudo-img").scrollHeight / autoRows +
                columnGap / autoRows
        )}`;
    });
}

masonryLayout();
window.addEventListener("resize", masonryLayout);