Stacks vs Grids in Framer (Fundamentals Lesson 8)

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.

00:00 Intro
00:03 Stacks vs grids overview
00:22 High-level differences between stacks and grids
00:55 Creating a grid layout
01:32 Anatomy of a grid
01:58 Fixed vs auto column settings
02:23 Setting rows and columns
02:52 How fill container height works
03:21 Sizing conflicts in grids
03:55 Gaps and padding in grids
04:19 Rearranging grid items
04:46 Spanning rows and columns
05:19 Sizing and positioning within grid cells
06:04 Using absolute positioning inside grids
07:15 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