Vanilla JavaScript: Masonry Grid Layout

Hi guys,

Back with another video where we will be creating a Masonry grid layout with HTML, CSS and JavaScript. This type of layout is used on Pinterest.

Thanks for watching. Please subscribe if you like videos like this!!

Conor

[aileenchan]

I love this approach to building a masonry grid layout! Thank you so much for sharing this content!!! 💜

[guru-xnyp]

Thanks alot really dope tutorial, keep them coming

[Mauro]

Nice !! Thanks for the tutorial. Btw your style is great

[soumelee]

amazing tutorial, i learn many things from this

[aseroboiobi]

Amazing tutorial bro! i love your minimalist style

[bayasahamed]

Thanks a lot for the clear explanation. It was really helpful.

[deepak]

Conor your channel is great!! and I think your amazing creative coder I'm glad found this channel!!

[nkamsartist]

Thanks for the great tutorial #Cornor #VanillaJS 😊

[aoliadi]

Hi Bailey, why not try to put borders around empty elements/tags before styling. It's hard visualizing styles given to empty containers.

You put a background color of red, but that should be done before any other styling, not after. And I think border or outline is better in stead of background-color.

Thank you. ❤ I love your pattern of thinking.

[harryhepburn]

Thank you very much for this.

How would you go about creating multiples of these on different pages pulling in a different set of images each time?

[epicrato]

Thanks for the excellent tutorial!! Any thoughts on how to implement a Load More on it so that we can paginate (load more) or infinite scroll instead of loading thousands of records. Thanks in advance!

[tinotaylor]

Hi Conor,

Thank you so much for sharing your knowledge on this. I have no idea how I would have gone about learning to create something like this from the getgo even after coding for several years 😅. Do you have any tips on how I could learn to make logic like this or maybe how you got to the point when you could create it? as I've been through all kinds of courses for JS etc but this just feels so alien to me.

[Uncaught_in_promise]

I used to library isotope masonry but it's jQuery dependant and heavy weight. Vanilla JS is lightweight but needs time to develop.

[benjamin]

Hey man, you work is pretty cool. I would really love to learn how to animate with code like you. Please do you have any tips that can help me. Thank you

[sevaiscool]

thank you again! and how to add link to each post? thank you

[박선우-sg]

Thanks for your tutorial.

I have some question this tutorial. Could you answer me?

1. Why are the values of window.innerWidth and previousScreenSize different after resize? I thought window.innerWidth and previousScreenSize are same. But when I printed them out on the console, they are different.

2. Why did you set window.innerWidth and previousScreenSize to resize point? I mean.. can i set with just window.innerWidth? What is the difference between using only one and both?

I'm not good at Js yet.
So, I need your help to understand this code.
I'll be waiting for your answer.
Thank you.

[collinsmokaya]

Hey. So I tried writing this code and I followed all the way through. But for some reason I get an error at the columnPosts.forEach portion. It tells me there is an "Uncaught Error typeError " and references the forEach. Is there anything I might have done wrong? The code works fine all the way up until this point. This is where the code breaks down:

columnPosts.forEach( post => {
let postDiv =

let image =
image.src = post.image;
let overlay =

let title =
title.innerText = post.title;

overlay.appendChild(title);
postDiv.appendChild(image, overlay);
column.appendChild(postDiv);

what should I do?

[tamilshoutcom]

Thanks, this looks good but believe not feasible for real life apps like pinterest.
Would want the data to just adjust according to screen size without call the function to rerender everything again.
And when user scrolls, would want the functionality to continue rendering new data on scroll without having to rerender previous data.
Is not efficient to clean out everything and rerender every time. Do you have a solution for that?

[sadafak]

Can you pls create this in Figma & WebFlow.

[namtran]

another way to make mans grid layout in CSS is:
.div(container) {
width: (of your choice);
columns: 4;
columns-gap: 20px;
}