Can you create Masonry layout with CSS grid layout?

I want to design a Masonry style layout with CSS Grid.
key functionalities I’m looking for

  • Content blocks have a consistent width but variable height.
  • They are ordered from left to right, then top to bottom. (Horizontally)
  • The layout can dynamically cope with extra blocks. This makes it ideal for handling layouts where more content is loaded onto the bottom of the page. (Using CMS)

I’m currently using this code but when I go to another page and come back to the grid layout div blocks stack each top each other

<style>
/* Control the min-width of the image with the minmax value */
/* The Gallery will break if the min-width of the image is reached */
.grid-test {
 grid-template-columns: repeat(auto-fill, minmax(1fr));
 grid-auto-rows: 0px;
}
</style>

<script>
/* Copy the following Code to resize the Images */

function resizeGridItem(item){
grid = document.getElementsByClassName("grid-test")[0];
rowHeight = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-auto-rows'));
rowGap = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-row-gap'));
rowSpan = Math.ceil((item.querySelector('.content-test').getBoundingClientRect().height+rowGap)/(rowHeight+rowGap));
item.style.gridRowEnd = "span "+rowSpan;
}

function resizeAllGridItems(){
allItems = document.getElementsByClassName("item-test");
for(x=0;x<allItems.length;x++){
resizeGridItem(allItems[x]);
}
}

function resizeInstance(instance){
item = instance.elements[0];
resizeGridItem(item);
}

window.onload = resizeAllGridItems();
window.addEventListener("resize", resizeAllGridItems);

allItems = document.getElementsByClassName("item-test");
for(x=0;x<allItems.length;x++){
imagesLoaded( allItems[x], resizeInstance);
}

</script>

<script>
    // Load more button script
$(function(){
$(".place-div").slice(0, 2).show(); // select the first ten
$("#load-more").click(function(e){ // click event for load more
    e.preventDefault();
    $(".place-div:hidden").slice(0, 2).slideDown() // select next 10 hidden divs and show them
    if($("div:hidden").length == 0){ // check if any hidden divs still exist
        $("#load-more").text("No more divs"); // change the text of the link to "No more divs"
     }
  });
});
</script>

This is my site link


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

In short yes (In my opinion Its easier to solve this with other approaches - i use libary https://masonry.desandro.com/ less than 2 minutes to implement).

or:

Summary of all approaches her:

Thanks. In my website, I am using the 1st option(Masonry style layout with CSS Grid). but, it’s not working properly with Chrome browser. When you go to CMS collection page and come back layout get stack together.

screen-record-1