How to Build a Masonry Portfolio Layout (Pinterest Grid) in Webflow

[Music] hey everyone my name is Kyle and today I'm going to show you how to build this masonry style layout using web flow this is a really popular layout option for portfolios for photographers or designers but wet flow really doesn't have a solution for this out of the box credit for this concept though goes to Savannah a web flow staff member on the web flow community forum she brought this up a couple of years ago but I wanted to make a video about it highlighting exactly how to accomplish this first I'm going to show you how to build this using just link blocks with images inside of those and then I'm going to show you how we can power this layout using web flow collections so let's get started so the first thing you need to know about building this layout is that it only works with images that have varying heights so if you have images that are all exactly the same height you're not going to get the staggered effect everything will stack nice and neat on top of each other in the next column the effect will be the same so you're not gonna really get that quintessential stagger layout that is really what makes this a masonry layout so for example you can see here that these images are lining up a little too neatly but I'm getting the staggered effect everywhere else and I can definitely adjust these images once I've got them in to achieve that effect even better so when you are creating images to put in your portfolio you just want to make sure that they are not all the same height and you can play around with their positioning to get a really nice staggered effect so I'm gonna hop over to a blank page show you how we can accomplish this I've gone ahead and added a section a container inside of that section and I have just a blank empty div with no classes on it now for the magic the entire masonry layout depends essentially on this one setting so if you go over to your style panel under typography with this 'div block selected we're going to open more type options and in the columns we're gonna type in three what this does is it gives us a sort of a hidden three column layout within this div block now all content this place in here will now flow between these three columns I'm gonna go ahead and rename this just columns now you can't see the columns yet but once we start adding content you'll be able to see the images start to fill it up so let's go ahead and we're gonna drop in a link block and this is so that the image we place inside of it will actually be clickable to a project page that you can build in the future and then we'll grab an image block and toss that in there we'll go ahead and choose our image I'll just start with this first one now before we start copying and pasting this image I'm gonna select the link block and give this a class I'll just call it thumb this way I can style all of the images in our layout at once okay now we've got style on our link block a style or a class on our columns so now we're good to just copy and paste now you see that it's gonna flow down to the bottom right I'm just gonna paste nine images so now we have nine images that we can replace we click on the second one double click I get the replace image and we can start adding in everything you can see that when I did that it actually moved it here to the bottom it's attempting to you know reflow these columns based on the height of the images that we're giving it so I'm just gonna click around start adding our images in again you can replace the or reposition these as needed later lift off with that one and then let's grab what do we have left let's grab this guy well maybe that guy okay so we're not really getting exactly that effect that we want yeah but I'm just gonna minimize all these I'm gonna grab this thumb class you can click on any of these to get your selector up and let's give them a little bit of margin now I'm holding down the option Alt key on my Mac when I drag this up and that gives me it like the a mirrored effect right so I can only I can drag one but it actually affects both and if you hold now shift it will affect all of them but we don't need that so I'm going to reset it back to zero we're just gonna go ten so that gives me ten pixel margin on the top and bottom of each image now you can see that the gap in between them is a little bit smaller so if we go back to our columns class which is our wrapper class with the three text columns added we can grab this little ellipses here and we can change our gap to match the total margin that we gave our image class which is 20 so I'm gonna grab this right here and I'm just gonna move it over here gives us a little bit better staggered effect there so what's really great about this solution that Savannah came up with is that because the style that Tex column style is what's driving our layout we can adjust that at each of the responsive breakpoints so that this is a fully responsive layout so if I click on tat on the tablet up at the top you can see that it still looks pretty good so got the nice three columns now sort of depending on the container width that you choose here we just have the default web flow container and it's at 940 pixels but you can just go over here to the style panel in that text column box and just change this to whatever you want so to actually looks pretty good and because this is you know an image heavy site we want the images to be nice and big then we can go to the portrait or sorry the landscape mobile and to still it looks pretty good but it's at this point that we realize we don't have any margin on our containing wrapper that columns div block so I'm gonna go back to the desktop with the columns div selected and I'm just gonna I'm gonna give this 20 pixels on each side so now we have a matching 20 pixels and actually I'm gonna give it 10 on the top and bottom and now we have 20 pixels all the way around 20 pixels between each image and between the gaps and the columns so now if we go back down to mobile landscape you can see that we've got some nice padding and margin around everything previewing that without any of the lines you see it looks really nice and neat and then down to mobile portrait obviously this is looking a little too small so we'll go back to our text columns change that from a 2 to a 1 preview this and we've got this nice long collection of images alright so that's it that's how to build a responsive masonry layout using that text column functionality we've got a nice wide grid at the desktop breakpoint and then as we go down we start to break it down into smaller columns and eventually down here so these are just gonna stack again you can reposition images as you want as many images as you want and when you're ready to link these to your project pages you just can create a new page and then come into the link block head over to your settings panel and choose your page so one last thing you can do let's say that you want a full width masonry layout for your page I have this inside of a container to put it in the center of the page and really just set a max width if you want a full width layout just drag your columns div block outside of the container and underneath the section and then delete that container and now you have a full width masonry layout it kept all of that nice padding so if we preview this we have this really nice layout going on so that's it that's how to build a masonry layout for your portfolio using web flow if you want to learn how we can power this layout using web flow collections stay tuned for part two

Channel: Kyle Schmitz

Views: 10,522

Keywords: webflow, webflow pinterest grid, masonry grid, webflow tutorials, webflow portfolio tutorial, webflow portfolio, webflow guide, kyle schmitz, mynameiskyle

Id: BE-PWz6PMts

Length: 10min 1sec (601 seconds)

Published: Thu Jul 25 2019