Layout & Design

Practice: Designing Fluid Layouts in Framer (Fundamentals Lesson 24)

Joseph

22:31

33K views

Mar 28, 2025

About this lesson

Toward the beginning of this course, we looked at how different positioning and sizing modes change how layers behave when parent frames, or even the browser window, change size

In this lesson we’re going to put it all together go over some best practices for creating fluid layouts in Framer

https://www.youtube.com/watch?v=OKnkLP4pw4Q&t=0s Intro

https://www.youtube.com/watch?v=OKnkLP4pw4Q&t=4s Why responsive design matters

https://www.youtube.com/watch?v=OKnkLP4pw4Q&t=15s Scaling layouts for all devices

https://www.youtube.com/watch?v=OKnkLP4pw4Q&t=36s Ensuring consistent experiences across viewports

https://www.youtube.com/watch?v=OKnkLP4pw4Q&t=53s The SEO benefits of responsive design

https://www.youtube.com/watch?v=OKnkLP4pw4Q&t=63s Designing responsively in Framer

https://www.youtube.com/watch?v=OKnkLP4pw4Q&t=76s Wrap up

🌞 Start for free: https://framer.link/yt

📚 Learn more at: https://framer.link/yt-academy

💎 Join the Community: https://framer.link/yt-community

🎉 Follow on X: https://framer.link/yt-x

0:00Toward the beginning of this course, we 0:01looked at how different positioning and 0:03sizing modes change how layers behave 0:05when parent frames or even the browser 0:08window change size. In this lesson,0:11we're going to put it all together and 0:13go over some best practices for creating 0:15fluid layouts in 0:17[Music]0:19Frame. In this lesson, we're going to be 0:22workshopping this project file, applying 0:24what we've learned in the previous 0:26lessons. We're not going to cover 0:27anything completely new. So, if anything 0:30is super confusing, you'll want to refer 0:32back to the corresponding lesson where 0:34we covered that particular topic in 0:36depth. But if you're up to speed on what 0:38we've covered so far, then this will be 0:40a great opportunity to see how things 0:41come together in practice. Feel free to 0:45grab the remix link and follow along.0:46I'll put the link in the description 0:48below here on framer.com/academy.0:52Before we jump into my project file 0:53here, I want to take a bird's eye look 0:55at a general structure for our pages 0:58that set us up for success. These aren't 1:00rules or requirements, but you'll 1:02probably find this structure to be a 1:04helpful framework for a lot of the pages 1:06you build. As always, the top level of 1:09our page structure is going to be the 1:11breakpoint. In this lesson, we'll focus 1:13on the desktop breakpoint, but in the 1:15next lesson, we'll look at how multiple 1:17breakpoints work. Our breakpoints are 1:19going to be a fixed width, but the 1:22height will fit the content of the page.1:24I also don't like to add padding to the 1:26sides of my breakpoint cuz it'll push 1:28absolutely everything inward and get in 1:30the way if we want to do a section that 1:32fills the entire width. But within the 1:35breakpoint frame, we'll create frames 1:37called sections. These will fill the 1:40width of the breakpoint and stack one 1:42after the other containing the main 1:44sections of content for our page. Think 1:46along the lines of a hero section 1:47followed by a feature section followed 1:50by a testimonial section. So on and so 1:53forth. You get the idea. Within sections 1:55is where I like to add my side padding 1:57to keep content from bumping right up 1:59against the side of the browser. But 2:01depending on what you're trying to do,2:02you can at least decide whether or not 2:04to add padding on a section bysection 2:06basis. And finally, since my sections 2:09are going to fill the width of the 2:10entire browser, no matter how wide 2:12things get, I'll often create another 2:14nested frame that I like to call a 2:16container, where I can add a max width 2:18to prevent everything inside of it from 2:20getting impractically wide. Sometimes 2:23folks will add padding to their 2:24container frames rather than their 2:26section frames, and that's fine, too.2:29Again, these aren't rigid rules. This is 2:31just a general structure you'll see 2:33often used by myself and by others in 2:36their framer sites and also in 2:38templates. Now, without further ado,2:40let's jump into the project file and see 2:42what we're working with. And we're doing 2:44this live, so bear with me. On this page 2:47that we're going to be focusing on,2:48we've got a lot of layers that are set 2:50to absolute positioning, which means if 2:53we preview this, I'm going to click on 2:55the preview window here. And I'm going 2:57to do this so many times that you'll see 2:58me using the keyboard shortcut more 3:00often than not. And that shortcut is 3:02command P on a Mac or controlP on a PC.3:05That'll toggle you in and out of this 3:07preview mode where we can check to see 3:10if we're doing a good job making our 3:12layers responsive, making sure that they 3:14flex fluidly here. But in its current 3:16state, if I make the viewport more 3:18narrow here, you can see that these 3:20layers aren't flexing at all. The image 3:22isn't getting smaller. The nav is 3:24getting cut off. The text eventually 3:25gets cut off. It's really quite a mess.3:28The footer and all. So, absolutely 3:31everything is causing a problem on this 3:34page. And we're going to fix absolutely 3:36everything. We're going to start from 3:38the top. Hierarchically speaking, we're 3:40going to start with the properties of 3:41the breakpoint and then we're going to 3:42go section by section. But to get the 3:44properties of the breakpoint dialed in,3:46I want to do so within a layout 3:48template. So that way I can apply that 3:50to all of my pages as this site 3:52continues to grow. So let's start with 3:55an element that's going to belong on 3:57every page, like this navbar. I'm going 3:59to rightclick on this and I'm going to 4:01choose create layout template. And I'm 4:03just going to name this main, but you 4:05can really name it whatever you want.4:07I'll click create. And then here we are 4:09within the layout template where we have 4:12our navbar because that's the layer that 4:14I created the layout template from. And 4:17then we've got the placeholder which is 4:18where all the content for the page is 4:20going to go. And if I zoom out you can 4:22see these are the only two things that 4:23are on the page. But really what we want 4:25to focus on first are the properties of 4:27the breakpoint itself. I don't 4:30necessarily want a gap to be enforced 4:32between every single section here. So 4:35I'm actually going to get rid of the 4:37gap. We'll manage our vertical rhythm 4:39using padding within the sections. Now,4:42again, most of what you see is going to 4:44be opinionated. These aren't rules. You 4:47can approach this differently if you 4:48want to, but I'm going to get rid of the 4:49gap here. And before I forget, I'm going 4:51to go back to our homepage here, and I'm 4:54going to grab this footer and press 4:56command X to cut. And then I'm going to 4:58go to the assets panel, go back into our 5:01main template here, and I'm going to hit 5:03commandV to paste that footer in. I just 5:06want to make sure that I have all of my 5:07global elements here within the template 5:09before I forget any of them. So, we've 5:11got our navbar, we've got our footer,5:13and again, if we go to the preview 5:15window and we take a look at this, we 5:17still have all the same problems that we 5:19had before. Nothing is flexing fluidly 5:23with the viewport. So, let's start 5:25fixing these things one thing at a time.5:27I'm going to start with the navbar here.5:29Now, it doesn't really matter what order 5:31you do these things in, but for the 5:33navbar, my approach is going to be to 5:35start with the child layers, make sure 5:36they're all good, and then work my way 5:38up the hierarchy to the top. So,5:41starting with our links here, if I 5:43select this frame that's containing all 5:45these links, you can actually tell by 5:47the icon here on the layers panel that 5:49this is a regular frame that doesn't 5:50have a stack layout. But because it's 5:52full of children that are distributed 5:55horizontally with even gaps, I'm going 5:57to turn that into a stack. So, I'm just 5:58going to click the plus sign here to add 6:00a layout just so if I add more nav items 6:03later or remove them, they stay nicely 6:05distributed horizontally. The logo on 6:08the left side is not a stack, but that's 6:10okay. It's just containing some layers 6:12that are absolutely positioned. And 6:14since the logo is never going to change 6:16size, it's always going to remain that 6:17same size. It's really not going to 6:20cause any problems just to leave that 6:21alone the way it is. So, I'm leaving the 6:23logo alone. But the parent frame, the 6:25main parent frame, the nav bar, the 6:28whole bar, this is where most of the 6:30work is to be done. So the first thing I 6:33want to do here is I want to make sure 6:35that the width is set to fill the width 6:38of its parent, which is the breakpoint 6:40itself, which means the viewport or the 6:42browser window. So with this set to 6:44fill, we're solving a major major 6:46problem here. The thing is simply 6:49setting this to fill doesn't solve the 6:51problem of the position of its child 6:53layers. So you can see here that uh 6:56we've still got problems. So let's go 6:58back and fix those problems. And the 7:00problem is that its immediate children,7:01this frame with the links and the logo 7:04are just floating around using absolute 7:06positioning. So I'm going to again, you 7:08might have guessed it, I'm going to add 7:10a layout to our navbar. And that's going 7:13to put the parent frame in charge of the 7:15position of the children. And you can 7:17see that their position has already 7:19changed. They collapsed inward. And the 7:21reason for that is we've got a 7:22horizontal stack that is set to 7:24distribute the layers in the center. So 7:27they're starting in the center and the 7:30space between them is determined by this 7:31gap here. What we really want is to 7:34instead create space between them. So 7:37when you choose space between, you're 7:39saying evenly distribute the available 7:41space to spread these layers out 7:43essentially as far as they can go. So 7:45they've gone all the way to the edge.7:47They've hit the edge. And the only 7:49reason they're not hitting the top and 7:50bottom edge is because we have a fixed 7:53height of 80. But let's actually change 7:54that. Let's change that to fit the 7:57content. So you could see now that the 7:59width of this bar is going all the way 8:01across the breakpoint and the height of 8:03it is clamping down to those child 8:06layers. So now it's become more obvious 8:07that the issue is just padding. So I'm 8:10just going to add 20 pixels of padding 8:12here. And there we go. Problem solved.8:14Now these things are being pushed all 8:16the way out, but they're also being 8:17nestled nicely inward with 20 pixels of 8:20padding. Now let's preview this 8:22again. Cool. That is more like it. Now 8:26you'll notice that this kind of gets 8:27infinitely wide. And if someone is on a 8:29giant display, they might not even see 8:32the nav links. They might be so far off 8:34to the right. They might not see the 8:35logo. it'll be so far off to the left.8:37So, let's actually enforce a max width 8:40on here. I'm going to click to add,8:42choose max width, and we don't want a 8:45relative width. We want to get to a 8:47specific width where we say don't get 8:49any bigger than this. And I want that 8:50width to be 1,200. The break point's 8:531200. We're looking at it currently at 8:551200. And that looks pretty good. So,8:57let's just say it stops when it gets 8:59there. And let's preview this again. So 9:02sure enough, when the viewport gets 9:03wider, the navbar doesn't get wider. But 9:06when the viewport gets smaller, then 9:07that max sizing is no longer getting 9:09enforced and that fill sizing is getting 9:11enforced instead. Perfect. So now let's 9:14fix this footer. It's going to be very,9:16very similar. We've got this stuff on 9:18the left and we've got this stuff on the 9:20right. But let's go through the same 9:22motions here. I'm going to select the 9:24parent frame. I'm going to start from 9:25the top and work our way down this time.9:27And with the parent frame for the footer 9:28selected, if I add a layout and do the 9:31very same thing. I'm going to set the 9:33distribute to space between. Now, all of 9:36these things are being distributed 9:38evenly. All of that available space is 9:41being split between the column on the 9:43left and all the other columns for the 9:45links. But that's not really how we had 9:47it laid out originally. The reason for 9:49this is that if you look at the 9:51immediate children of the footer, each 9:53one of these is an immediate child. So 9:55the space between is being distributed 9:58between each and every one of these.10:00What I can do is select these link 10:02columns and wrap them in their own 10:04frame. And I want that frame to clamp 10:06down on these things. I don't want it to 10:08be any wider or taller than it needs to 10:11be. So rather than creating a frame and 10:14adding a stack layout and then setting 10:16the width and the height to fit, I can 10:18just press shift A on the keyboard and 10:20that'll automatically wrap my selection 10:22in a frame. add a stack layout and it'll 10:26set the width and the height to fit all 10:28in one step. Now, all I need to worry 10:30about is the gap between them. So, I 10:32think that gap originally was around 60.10:35And I want these all to be nicely 10:36aligned at their top edge. So, we're 10:39getting warmer here. Now, I'll go back 10:41to the footer frame. I'll make sure that 10:42the width is set to fill so that it gets 10:46wider as the browser window gets wider.10:48And the height, I'm going to do the same 10:49thing I did with the nav. And I'm gonna 10:51have this clamp down and fit the content 10:55and then fix the spacing around it using 10:57padding. So I'm just going to add a 10:59uniform 80 pixels of padding. And that 11:01gets us back to pretty much exactly 11:04where the original design was. If not,11:06we'd have some fiddling to do, but 80 11:08pixels happens to look okay. So I'm 11:10going to stick with that again. I'll hit 11:12command P to preview. And let's take a 11:14look. There we go. So now things are 11:17getting smaller when they can and things 11:19are getting larger when they can. And 11:21we've got that max width being enforced 11:23on our navbar, but we don't have that 11:24being enforced on our footer. And that's 11:27okay. I'm I'm actually cool with that.11:28I'm going to leave that as is. If 11:31someone navigates all the way down to 11:32the footer, they're probably visually 11:34scouring things. So I would say it's a 11:36less sensitive situation if they have to 11:38look a little further to the left or a 11:40little further to the right. Cool. So 11:42we'll go back and we'll go to the 11:44homepage. And I'm going to press command 11:461 or control 1 on a PC to zoom all the 11:50way out and fit everything into view.11:51And you can see that our layout has 11:54gotten kind of crunched. And what's 11:56going on here is that now that we have a 11:58layout template applied, our desktop 12:00breakpoint has become a stack. That 12:03happens automatically. That comes with 12:05the territory. The breakpoint becomes a 12:07stack and all of its immediate child 12:09layers are now flowing from top to 12:11bottom. And because I got rid of the gap 12:13within the breakpoint properties,12:15there's no gap between them. They're all 12:17kind of like sandwiched and scrunched 12:18together, which is fine. We have a 12:21little bit of work to do, but that's 12:22totally fine. I'm going to start by 12:24recreating that structure that we talked 12:26about at the very beginning of this 12:28lesson where I have sections and then 12:30within sections, I have containers 12:32containing the content. And for our 12:34first section, I'm going to group up all 12:35of our hero content. So, I'm going to 12:37select this image, the text all the way 12:40up to the tag. I'm going to rightclick 12:42and I'm going to choose add stack. And 12:45wrapping your selection in a frame this 12:46way automatically sets the height to fit 12:49and the width to fill, which is exactly 12:51what we want for a section. And to keep 12:53things clean, I'm going to come over 12:54here to the layers list. I'm going to 12:56double click and I'm going to name this 12:58section section dash 13:02hero. And this definitely needs some 13:04padding around it. I want more padding 13:07on the top than I want on the sides, I 13:09think. But let's start with 40 pixels 13:11all around. And you can see we already 13:14have a little problem where our drop 13:16shadow is being clipped by the section 13:18frame. And that's because the section 13:20frame has the overflow set to hidden.13:23So, we can either switch this to visible 13:25or we can just add a bit more padding 13:27and then it won't be a problem in the 13:28first place. So, let's actually do that 13:30cuz I know I want more space above and 13:32below this section. I want just a bit 13:34more breathing room. So, I'm going to 13:36split apart our padding. And for our top 13:38padding, I'm going to go 80. And I'm 13:40going to do the same for the bottom.13:42Going to go 80. So, I think that looks a 13:45little more natural. We've got a little 13:46more space up here. Pushing the content 13:48below it down. So, I think I'm happy 13:50with that. 80 top and bottom, 40 on the 13:53sides. And the 40 on the sides. If we go 13:56and I'll press command P to preview 13:57this. The 40 on the sides isn't really 14:00presenting itself in any which way. And 14:02the reason for that is we've got a bunch 14:04of layers that have their width set to 14:06fixed. So that 40 pixels of side padding 14:09can't really push on anything. So let's 14:12fix that. I'm going to start with this 14:13image cuz that's the most glaring issue 14:15cuz it's the widest thing. And I'm going 14:18to add a max width. I'm happy with this 14:21fixed size. I like where it starts out.14:24But I want to add a max width that does 14:27not allow it to get any larger than 100%14:30of its parent. So that's it. Let's 14:33preview this again and see what that 14:35looks like. And you can see this is 14:37already sort of fixing the issue. You 14:40can see that the frame is now respecting 14:43that padding. So not loving it cuz the 14:46image is getting cut off. So what I want 14:49to make sure to do is click the lock 14:50between the height and the width to lock 14:52the proportions of this image so that it 14:54gets less tall as it gets less wide. And 14:56there we go. That did the trick. But our 14:59text up here at the top, our text is 15:01definitely still a problem. So, let's 15:04see if we can fix that. I mentioned 15:06earlier that within a section that can 15:08get infinitely wide, I like to create a 15:11container for content that I don't want 15:13to continue to grow and grow and grow.15:15So, I'm going to do exactly that. I'm 15:18going to select the tag, the heading,15:20and the body, and I'm going to wrap 15:22those in their own stack. So again, I'm 15:24going to use that Mac shortcut of option 15:27command return controlal alt enter on a 15:29PC. And now I've got my container and 15:33I'm just going to rename this. You can 15:34call your containers whatever you want.15:36I'm going to name this text lock up. And 15:39I'm also going to set my H2 and my body 15:42to fill the width, which obviously it's 15:45getting too wide. We're going to fix 15:46that here in a moment. And to fit the 15:48content for the height. So now we can go 15:51back to that text lockup container that 15:52I created and we can add a max width to 15:55that that doesn't allow it to get as 15:58wide as it's currently getting. So for 16:00that max width, we definitely want it to 16:02be fixed. And I think we don't want this 16:04to get any wider than 600 pixels. So 16:07there we go. That's actually looking 16:09good. And the hero now has two direct 16:12children. It has the text lockup itself.16:14It has the product image. It has the 16:16padding around it. But we probably want 16:19to increase this gap here to something 16:21more like 40, just so there's a little 16:23bit more room between the text lockup 16:26and the product image. But before we go 16:28any further, let's preview this and see 16:29how we're doing. Now, when I make the 16:31viewport smaller, we've got our image 16:33shrinking. And when this gets smaller 16:35than the max width of that container 16:37that has the text inside of it, then the 16:39fill sizing kicks in and things will 16:41automatically reflow and be sure to fill 16:44the full width of the viewport. Awesome.16:46That's big progress already. If you're 16:48paying super close attention, you may 16:50have noticed that I used a fixed width 16:52for the image with a relative max width.16:55And I did exactly the opposite for the 16:57text container. Don't read into that too 17:00much. Both ways are totally fine. I just 17:02want to make sure you're aware of both 17:04and how they can generate a similar, if 17:06not identical effect. Cool. So, last but 17:09not least, we just have our features 17:11down here. And structurally, I'm going 17:13to do the same exact thing I did for our 17:15hero section. I'm going to grab this 17:16features frame. I'm going to press 17:18option command return to wrap this in a 17:21stack that is automatically set to fill.17:24It's automatically set to fit the height 17:26of the content. I'm just going to rename 17:27this section features. And I'll try to 17:31be consistent with my padding here and 17:34separate the values. And I'll do that 17:35same top and bottom padding of 80 and 17:38left and right padding of 40 just like 17:40the section above. But even still, I 17:42kind of don't like that these go wider 17:45than the image above. And again, the 17:47image above is set to a width of a 17:49thousand. So, I'm going to grab the 17:51features container that we have here.17:53And that width we can leave on fixed.17:55I'm just going to change that to a,000.17:58So, it's the same width as the image 17:59above. And I'm going to add a max width 18:01of 100%. So, it'll get squished in 18:04nicely. And you can see we've already 18:06got a problem here. We've got things 18:07that are kind of overlapping all funky.18:10And the reason for that is this features 18:12frame again doesn't have a stack layout 18:14applied. So these info cards are just 18:16kind of floating freely within it using 18:18absolute positioning. So for our 18:19features, I'm going to add a layout. I'm 18:22going to leave this as a stack layout,18:24but we're actually going to come back 18:25and revisit this here in a moment. But 18:27first, we got to address the issue of 18:29these cards not fitting. The most 18:31glaring problem is that they're set to a 18:33fixed width, and they really need to 18:35share the available space. So, I'm going 18:36to switch them to fill, which is going 18:38to do exactly that. The sibling layers 18:41are now going to share the available 18:43space. But if we look a little closer,18:45we've still got an issue where text is 18:48kind of sticking out of this card here.18:50And the reason for that has something to 18:52do with the layout within this component 18:55because each one of these cards is an 18:57instance of the same component. So, what 18:59I'm going to do is I'm going to press 19:00the return key to edit this component.19:02And the first thing I'm going to do is 19:04just grab this parent frame and wiggle 19:05it and see what the child layers do. And 19:08it looks like we've got another fixed 19:10sizing issue. So, let's select these 19:12text boxes, which are obviously the 19:14culprits cuz they're sticking out. And 19:16let's set the width of them to fill. So,19:18that way if the parent frame gets wider,19:20they get longer. And if the parent frame 19:22gets more narrow, they get squashed 19:24down. And that should do the trick. Now,19:27if we go back to our homepage, there we 19:29go. So now these instances can actually 19:31flex. And if I press command P to 19:33preview this, we can get a better look 19:36at how they flex. Again, we've got a max 19:38width, so they're not going to stretch 19:39out wider. But if I get more narrow,19:42there we go. They squash down. Now,19:44things do get to a point where they're 19:46impractically narrow and the design 19:49breaks, which is why we're going to look 19:51at break points in the next lesson. But 19:53in the meantime, I want to consider how 19:55I might futureproof this. And this is 19:58kind of open for debate. Right now,20:01we've got our features in a horizontal 20:02stack. Now, this works great at desktop 20:04sizes. We have plenty of width to occupy 20:06with this horizontal stack. And even for 20:09mobile, we could just switch the 20:10direction to vertical and have these 20:12things stack from top to bottom instead 20:14of from left to right. But somewhere in 20:16between at sort of the tabletish sizes,20:19we're going to have kind of a weird 20:21crunch. they're either going to be too 20:23wide in one column or it's going to be 20:24too narrow for four columns. So, what 20:28I'm going to do to futureroof this is 20:30instead of using a stack layout, I'm 20:31going to use a grid layout. And by 20:34setting this to a grid layout, we'll 20:35later be able to choose how many rows 20:37and columns we want for desktop, for 20:39tablet, and for mobile. So, we'll be 20:42able to make the ideal choice for each 20:44viewport size. In the meantime, you'll 20:46notice that we've got some things 20:48getting cut off here, and that's because 20:50the height of this frame is still set to 20:51fixed. I'm going to change that to fit 20:54the content instead. There we go. That's 20:56much better. And because we're currently 20:58working on the desktop breakpoint, I'm 21:00going to increase the columns to four 21:02and I'm going to reduce the rows to one.21:05Now, we should be in a pretty good 21:06place. I'm going to preview this. And 21:08there we go. We've got things squashing 21:10down real nicely. And if we come down 21:13here, we've got our feature squashing 21:14down, but there's still one little 21:16issue. We've got the bottom of our 21:18features. There's supposed to be a learn 21:20more button at the bottom of each of 21:21these. We've got that getting cut off as 21:24these things shrink. And the reason for 21:26that is specific to the fact that we 21:28turn this into a grid. And if we go into 21:31the advanced settings, our grid happens 21:33to have a fixed height for each cell.21:35So, we're just going to change that to 21:37fit the content instead. Now, one last 21:40preview. Let's come down here. And there 21:43we go. Now the grid cells are getting 21:45taller to make room for all that 21:47content. But naturally, if the viewport 21:49keeps getting smaller and smaller and 21:51smaller, we get to a point where our 21:53layout just doesn't make sense anymore.21:55And that is a job for break points,21:58which we're going to tackle in the next 21:59lesson. And there you have it. Now 22:01you've got a better sense of how basic 22:03structures of frames along with all the 22:06layout properties at our disposal can 22:08come together to create fluid layouts 22:10that flex with the browser's viewport.22:13That's it for this one. I'll see you in 22:14the next one where we'll take the 22:15responsiveness of this layout even 22:18further using breakpoints.

TeachesResponsive Design Sizing

Also coversAbsolute Positioning Breakpoints Components Frames Grids Keyboard Shortcuts Layout Templates Links Remix Links Spacing Stacks Templates

Watch on YouTube ↗

‹ Framer Update: P3 Colors

What is Responsive Design? (Fundamentals Lesson 23) ›