Tailwind Masonry Grid Layout Tutorial - Fully Responsive

Alright, we're going to build a masonry grid layout which is what you see on Pinterest and Unsplash and other websites. This layout is basically to arrange a grid of elements with different heights. I'm going to start by creating a simple React project and we'll create a masonry component and we'll extend it so you can easily use it in your own projects as well. I'm just going to use all the default settings in here. Now this will take a minute to create. Alright, so that's done. Now I'm going to create a masonry component right here. First I'll open the project, which is right here. Okay, I'll go in here, I'll create a components folder, and I'll add a masonry component. There we go. Now there are several ways to create a masonry layout in CSS, but for our purposes I'm going to use the CSS columns property. And what this does is basically divides the elements content into a bunch of columns. Now first let actually create the actual component I going to start by giving it a couple props which are items and render item and this is just so you can actually control how you want to render these items and since I'm using TypeScript I'm also going to assign some props assign some types to these props I'm gonna use a generic parameter over here to represent the actual item that's being rendered and I'm going to pass this here like so and also here now let's set up the actual code for this so this is going to be very short in comparison I'm going to add these classes over here just for styling and the actual masonry layout is being done with this columns class. I'm also going to make it responsive by adding these classes and inside this component I'm just going to use the render item function that we pass in as the prop. Okay so this is all we need for the masonry component. Now let's go back to our page and actually render this. I'm going to remove all of this default HTML that we have over here And instead of this I going to render our masonry component over here Now we do need to pass in the required props, items, and render item. So for items I'm just going to paste a list over here that I already have. But these can be anything you want basically. I'm also going to create the type for items. Right here. And I'm going to pass this in over here. Now finally we just need a prop for render item. And this is just a function that's going to describe how to render each item in this list. So let's create this now. This is going to take an item as the argument. And it's going to return JSX. Now make sure to use the key because we are rendering items in a list over here. Now again you can render these items in any way you want but I just going to display the image over here and the name of the image that we have in the items Okay, now let's just pass this in over here. and finally I'm going to just limit the width of this container just so it looks a bit nicer okay now let's run this and see how far we got and there we go this This is a masonry layout and our items are being rendered here. Now the only really tiny change I'm going to make is I'm going to render the item name as well right here. This is just for styling. This is not something that's really necessary. But I'm gonna do it. Okay, let's see now. And yeah, there we go. We have every single item that we described in that list earlier, and it's being rendered here in our masonry layout.