Layout & Design

Stacks vs Grids in Framer (Fundamentals Lesson 8)

Joseph

7:46

59K views

Nov 20, 2024

About this lesson

Stacks and Grids are two powerful layout tools that help you arrange elements in your designs. They’re both used to create flexible and responsive layouts, but they differ a bit in functionality and are suited to slightly different use cases.

In the previous lesson, we talked about Stacks — but let’s talk about how Grids compare — and get comfortable with the basics of how they work.

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

https://www.youtube.com/watch?v=gqjlM_yCVWo&t=3s Stacks vs grids overview

https://www.youtube.com/watch?v=gqjlM_yCVWo&t=22s High-level differences between stacks and grids

https://www.youtube.com/watch?v=gqjlM_yCVWo&t=55s Creating a grid layout

https://www.youtube.com/watch?v=gqjlM_yCVWo&t=92s Anatomy of a grid

https://www.youtube.com/watch?v=gqjlM_yCVWo&t=118s Fixed vs auto column settings

https://www.youtube.com/watch?v=gqjlM_yCVWo&t=143s Setting rows and columns

https://www.youtube.com/watch?v=gqjlM_yCVWo&t=172s How fill container height works

https://www.youtube.com/watch?v=gqjlM_yCVWo&t=201s Sizing conflicts in grids

https://www.youtube.com/watch?v=gqjlM_yCVWo&t=235s Gaps and padding in grids

https://www.youtube.com/watch?v=gqjlM_yCVWo&t=259s Rearranging grid items

https://www.youtube.com/watch?v=gqjlM_yCVWo&t=286s Spanning rows and columns

https://www.youtube.com/watch?v=gqjlM_yCVWo&t=319s Sizing and positioning within grid cells

https://www.youtube.com/watch?v=gqjlM_yCVWo&t=364s Using absolute positioning inside grids

https://www.youtube.com/watch?v=gqjlM_yCVWo&t=435s 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:00stacks and grids are two powerful layout 0:02tools that help us arrange elements in 0:04our designs they are both used to create 0:07flexible and responsive layouts but they 0:09differ a bit in functionality and are 0:11suited to slightly different use cases 0:13in the previous lesson we talked about 0:15Stacks but now let's talk about how 0:18grids compare and get comfortable with 0:20the basics of how they 0:23[Music]0:24work let's start with a highle look at 0:27the difference between stacks and grids 0:30as we learned in the previous lessons 0:32Stacks are used to arrange elements in 0:33either a vertical column or a horizontal 0:36Row one or the other great for simple 0:39layouts where you want items to flow in 0:41a single Direction Stacks automatically 0:44handle spacing alignment and 0:46distribution of their child elements 0:48making it easy to create consistent 0:50layouts if you're familiar with HTML and 0:52CSS Stacks are based on Flex box grids 0:56on the other hand offer a more complex 0:58and structured way to arrange elements 1:00in a two-dimensional layout with both 1:02rows and columns so grids are great for 1:06layouts where we need to distribute and 1:07align elements both horizontally and 1:10vertically think more complex layouts 1:12like dashboards image Galleries and even 1:16feature bentos because grids allow us to 1:18decide how many rows or columns and 1:20items spans across in the world of HTML 1:23and CSS grids are based on CSS grid but 1:27a bit simplified in framer to make them 1:29easier to work with 1:30let's look at how to create a grid 1:32layout much like Stacks we can start 1:34with any old frame add a layout on the 1:37properties panel then just switch the 1:40layout from stack to grid alternatively 1:43we can draw a frame with a grid layout 1:45already applied using the grid tool in 1:47the layout menu of the toolbar or by 1:50pressing shift G on the keyboard then 1:53clicking and dragging to draw our 1:55grid before we go any further let's look 1:57at the anatomy of a grid when we're 2:00looking at a grid like this one it looks 2:02like we have two structural levels to 2:04the hierarchy the parent frame with the 2:06grid layout applied to it and the 2:08immediate child layers of the grid which 2:10flow left to right top to bottom let's 2:12call these grid items but there's 2:15actually a third thing going on in 2:17between what makes this Frame a grid in 2:19the first place is that it contains 2:21invisible rows and columns that form 2:23invisible grid cells which behave like 2:26containers and hold each grid item these 2:29containers might be invisible but 2:31they're very real because when we decide 2:34how to size and position each grid item 2:36we're doing so in relation to these 2:38invisible containers so naturally we got 2:41to acknowledge they exist in this 2:43example I've made a slightly bigger grid 2:45with 12 frames inside as grid items for 2:48us to play with each one is set to fill 2:50the height and width of its cell which 2:52makes it really easy to see the size and 2:54shape of each cell now let's play with 2:56the properties of the grid Itself by 2:58default grids have a fixed number of 3:00rows and columns I say by default 3:03because under the advanced settings 3:04you'll actually find a toggle to switch 3:06between having a fixed number of columns 3:08or automatically cramming in as many 3:11columns as will fit into the available 3:13space we're not going to dig too far 3:14into the advanced settings in this 3:16lesson just know that these settings are 3:18here for you and might be worth 3:19exploring depending on what you're 3:20trying to build with one of these fixed 3:23grids we get to choose how many columns 3:25and rows we want when we change the 3:27number of columns the number of rows 3:29will actually adjust automatically to 3:31make room for all the grid items we can 3:33add or remove rows but can't create too 3:35few rows for the number of grid items we 3:37have this also makes it easy to override 3:40the number of columns to fit better in 3:42smaller break points without having to 3:44worry about doing the math for the right 3:45number of rows in fact if we add more 3:48grid items later additional rows will 3:50get added automatically you'll notice 3:53that as we add more rows each row is 3:55shrinking to make room if we go to the 3:58advanced settings we can see why this is 4:00happening by default height is set to 4:03fill container which means all of these 4:05rows are trying to grow to fill the 4:07height of the grid frame we can also set 4:10a fixed height or choose to fit the 4:13height of the content of each row but we 4:15don't really have any content at the 4:16moment that can support the height of 4:18each row so I'll leave this set to fill 4:20container on that note much like Stacks 4:23it's possible to create a sizing 4:25conflict between the height of the grid 4:27itself and its rows or between height of 4:30the rows and the content that's within 4:32them you may remember this from the 4:33previous lesson that fit content can 4:36conflict with fill sizing since someone 4:39has to be in charge of the size or else 4:40the layout collapses in on itself the 4:43same phenomenon is at play with grids if 4:46the height of the whole grid is set to 4:47fit content the height of the rows can't 4:50be set to fill container similarly the 4:53height of a grid item can't be set to 4:55fill if the rows themselves are set to 4:57fit content just like with stacks 5:00okay back to the basic properties again 5:03similar to Stacks grids allow us to 5:05define the gaps between things we get a 5:07single field to determine the gaps 5:09between both the columns and the rows 5:12then padding allows us to add a cushion 5:14of space around the inside of the grid 5:16frame again just like Stacks another 5:19similarity between stacks and grids is 5:21that we can click and drag items to 5:23rearrange them we also get these nice 5:26little control handles we can drag to 5:28avoid grabbing the wrong layer by 5:30mistake or we can rearrange layers on 5:32the layers panel and even use the arrow 5:34keys to nudge the selected layer up or 5:37down the Sorting order the immediate 5:39child layers of a grid again we'll call 5:41these grid items occupy those invisible 5:44grid cells I mentioned but where things 5:46get interesting is that we can decide 5:48how many columns and rows they span 5:51across you can even make a grid items 5:54span the full width of the grid by 5:56choosing all 5:57columns we can still drag to rearrange 6:00things visually and change the Sorting 6:01order and the grid will adjust this is 6:04what makes grids a great choice for 6:06creating Bento layouts or any grid 6:09layout for that matter where some items 6:10need to be given more real estate than 6:12others okay so that changed the size of 6:15the invisible cell container that the 6:17grid item occupies then we also get to 6:20decide the size and position of the grid 6:22item within that container we have our 6:25usual sizing options of fixed relative 6:28fill and fit content you can see that 6:31with fill the layer fills the entire 6:33width or height of the invisible cell 6:35container it occupies but when we change 6:38a dimension to fixed or relative its 6:41size can now differ from its container 6:43which gives us a new position control to 6:45decide how the element will be aligned 6:48within the container you might be 6:50thinking can I switch to Absolute 6:51positioning to move this around wherever 6:53I want inside the cell remember what 6:56happens when we switch a child of a 6:57stack to Absolute positioning it removes 7:00it from the flow of the stack same thing 7:02happens with 7:03grids if you do need to get some 7:05absolute position layers within a grid 7:07cell you can leave the immediate child 7:09layer of the grid set to relative and 7:12Nest absolute layers within that so now 7:15you've got an idea of how grids differ 7:18from stacks and why in some cases you 7:20may want to use a grid layout instead 7:23with both stacks and grids in your tool 7:25set you'll be ready to tackle just about 7:27any layout you set out to create there 7:29are just a few more sizing and 7:30positioning modes for us to look at in 7:32the next couple of lessons I'll see you 7:34there

TeachesGrids Stacks

Also coversAbsolute Positioning Frames Keyboard Shortcuts Responsive Design Sizing Spacing

Watch on YouTube ↗

‹ Framer Awards: We're giving away $100,000

Framer Animations: Beautiful Things Happen ›