Easy Masonry Grid Image Gallery in Webflow | Grid Like Pinterest

hey what's happening guys vaco here with another webflow tutorial this time i'm going to show you how to build a masonry grid in webflow this is masonry grid it's this sort of misaligned floor of photos that is quite common it's like a pinterest style and it's very very nice way to actually arrange photos on a website if you have a gallery something like that it's a great way often photos come in very different shapes and sizes right and you do want to show that so for example when the photo is taken in a portrait is this a portrait mode you don't want to cut this and make it standard like everyone else you do want it to show the full extent of the photo because there was a reason why it was taken like this for example this guy right this photo if you make it square and landscape mode then for a guy's gonna be cropped unnecessarily so masonry glue grid has a lot of great uses you can even make cards out of this so it's very simple to build this in webflow and now i'm gonna show you how to do it so um i have created a cms you don't have to do this with cms but uh often you will because you'll have like a blog post same as something like that inside the cms collection so i'm gonna demonstrate it how to build this with uh when you're working on cms it's going to be a lot easier if you're not working with the cms you just drop the photos in that place so i have just bunch of there's nothing here besides a name and a photo so all of these cms items are just the photos that i randomly uploaded that's all there is to it so we'll start by i'm just going to create a header drop a section drop the container um let's give this guy some padding and i give it some actually let's give it a nice gradient you guys know how to create gradients right it's not from the color here because it's just the background gradients are being created from the styles background style so you have to click click this plus icon and then choose this second guy which is the linear gradient all right i'm going to delete this because there's two now you have this gradient which starts from one color ends to another color click on the beginning to actually double click on it and then now you're able to edit the beginning color and actually i'm going to switch change the direction like an angle of the gradient to maybe something i 135 that way it's not exactly 90 degrees starting from left to right but it's sort of angles right and okay let's see get light then the end color double click on it put something change obviously you can page paste the code here the hex code as you wish let's make it more like this yeah that's about right like epley style you know guys apple.com that's somehow today that's what they're using as uh on their websites a lot of gradients and let's drop a heading inside asynchrony grid give it some different font montserrat is good there you go white you guys know this webflow trick you can just type white and automatically change the color perhaps shrink the bottom padding a little to make it more so excellent now we have a header now we'll drop another section drop another container give it another heading i'm just randomly using cuttings i don't usually do 33 i like to be precise i would hate to use 33 or 33 pixels something uneven like that on a real website but here i'm just messing around doing a quick tutorial so i will now now the first step so because it's a cms item we need to put a collection list if it wasn't a cms item then we would just drop images inside a div block dab that's it that's the only difference so because it's a cms we are going to put a collection list this guy and we will connect it to our cms collection which is i named it as photos we'll connect it there and you're not going to choose any column so don't choose columns here you want it to be full width we're not we're going to use something else to create those columns so make them full now right now nothing is displaying why because we don't have any elements inside and they're not connected what we need to put inside is the image element in one of them you don't have to put in all of them you just put in one of them and that will automatically apply to all of them still empty right because it it's not connected now it's just a random static image element to make it connected to the cms we need to click get image from and then it will give us all the fields that are eligible for this so you're not if you're not seeing your field here that means you are trying to connect something that is a different type of a field image fields connect with images and text fields connect with text in this case it shows up thumbnail photo that's what i have and now it's all connected and this is what we get they are being pulled on their original size well not fully original because it's being sized by the parent so whatever fits they pose it one by one now we are going to make this masonry grid and what we do is this not with grid not with flexbox actually something you wouldn't think and it's inside typography you have to click more type options it's not going to be opened by default more type options and then you get this thing called columns now you're not going to do this on the image very important part because you are breaking down something into columns so you're not breaking down image into columns you're breaking down the parents parent that holds everything together now in our case not the collection item because collection item just holds one image inside if we're breaking down it's just gonna break down whatever is inside and it's just a single thing inside so not that what's that one up collection list is collection list the correct thing we can see it in the navigator so collection list holds all our photos as individual collection items so that's gonna work this is what we want to break down not collection list wrapper because collection list wrapper only has one item inside and that's collection list that's it so it's just going to break down one single thing but collection list item although it shows here it only has one item that one item is all of these guys and you'll see this by the boundaries that you get these purple boundaries collection item and you only get the boundary up to here but if i select collection list then a whole thing is selected or collection wrapper the whole thing is selected right so that's not the correct thing um not in case of collection wrapper it's not but in case of a collection list it is because that's what we need to break it down so where was it uh columns and just choose whatever columns you wanted to make three columns and voila now it's a masonry now how this works this is actually a way you to style a text do you guys know how you style text in microsoft word this is how it is being styled the text it starts from here so sort of like a newspaper style text goes in one column until it finishes and reaches the end of the whatever is available then goes to the second and then third and auction and actually it tries to balance it out in a way that they are sort of become equal so you're not going to have one column fully going all the way down to the page right it's going to try to make it balanced but it will not cut something that cannot be cut like a photo right so it will end the photo whatever last one it fits then it goes to this one and this one you cannot rearrange this here it has to flow like this and the gap between them is uh can be also handled from here the gap right now it's zero but there is something from the collection item collection item has a default uh uh something some default paddings or margins on them if i'm not mistaken but anyways gap is good so now what we need is uh margin on the bottom right so we're now we're going to take e take collection item and give it let's say 15 pixel margin on the bottom what you usually want to do from the design perspective you want to match the gap whatever the gap is here you want it to be exactly the same because that's consistent and that looks great but if you're going to make it like you know 30 or something that doesn't look very nice you want it to be uniform i know in this case the default one is 15. and that's it that's your collection uh list broken down into masonry grid but i have one more thing to show actually a couple more things to show here so right now i just the photos so i can click on them nothing works right it'll be nice thing to have a gallery type so this is what often you want to do you want to have this a gallery so you want these photos to actually open up now how do we make them open up we have to use a lightbox link it's an element it's a component that webflow has so what we're going to do is we're going to actually delete this image element we don't want that in this case we want to use a light box right this and lightbox has two parts in it one that is a thumbnail and you can we can see this in the settings one that is a thumbnail and this placeholder whatever showing and one that is what's going to open up the gallery behind it in our case what we're going to do is we're going to select get image from thumbnail photo and this is exactly going to do whatever we just did but if you see when you click on it nothing happens because we didn't connect it to what is it opening up this is just the thumbnail but we haven't told it that we want to open up the same image as um in the model in the light box that is called media it's right here so there's a bunch of different settings here just find where the media is you have to have lightbox link or the image inside selected to find this media if you have lightbox link selected it's going to show up right away right here and you click get media from photos and connect it to the same thing thumbnail photo image now when we click on it each image will open up like this and this is x line right that's what we want now one more thing you can do you can connect this if you want this to be a like complete gallery the person opens up and then goes through the photos what you can do is you can select this link with other light boxes if you have image selected it's going to show up right here link with other light boxes that means whatever all the light boxes are on this page it's going to connect them together but to connect them together you have to name give it a group name otherwise it's not going to know which light box is connected to which one and this is defined by the group name so you have to give it some sort of masonry gallery group name now in this case i'm just giving this to one because this is a collection list whatever i do here it's going to be applied to everything as you can see that masonry gallery is applied on everyone but if you are working with static content you will have to do this with each individual one all right each individual one has to have this masonry gallery connected to that i don't remember if it's inherits from the class so if it's the class is applied and you do this i don't think so but you know you can check that but i don't think it's going to inherit this from the class so you will have to individually select them give this check this box and put that group name on them so now when you go inside the preview mode and you click the whole gallery is going to open up like this and you can go through it click on different photos and all of them work like this all of them will open up the gallery and that's it that's how you build masonry grid in waffle

Channel: Vako Shvili

Views: 4,097

Keywords:

Id: MyqO7wHcayY

Length: 14min 16sec (856 seconds)

Published: Mon Dec 07 2020