Part of 100+ video lessons
Short, step-by-step lessons you can rewatch anytime.
Hands-on project
Follow along in the host project and build as you learn.
Certificate path
Counts toward your Framer Fundamentals certificate.
Start with the holder, split it, then fill each box.
Make the holder
One frame with layout on, holding a top section and a bottom section.
Fill versus fixed
The top fills the space, the bottom stays a fixed height, so it flexes properly.
Nest the cards
Split the top into left and right, then stack cards inside with a consistent gap.
SEE THE LAYOUT AS BOXES
Break any bento grid down into its nested frames before building.
BUILD IT WITH FILL AND FIXED HEIGHTS
Control which sections flex and which stay put.
FILL THE CARDS WITH CONTENT
Add text, images and colour once the structure holds.
Layout in Framer
Framer's layout system works like auto layout in Figma or Flexbox in Webflow. Learn how stacks and grids bring alignment and order to your elements.
Overflow in Framer
Overflow decides what happens when content is bigger than the frame it lives in. Learn the four overflow types and when to use each one.
CURRICULUM
WHAT YOU'LL LEARN IN THIS COURSE
In the Ultimate Framer Masterclass, you’ll master Framer from the ground up. Follow real projects, get expert feedback, and finally design and ship the way you’ve always wanted to.
Rebuild a bento grid you like from a real site, using fill and fixed heights and a single consistent gap.
09:07
PUBLISH CHECKLIST
Bento holder created
Top and bottom split
Fill and fixed heights set
Consistent gaps
Cards filled with content
Responsive on mobile
TRY IT OUT
Cesar Rodrigues
Founder, Craate Creative
CERTIFICATION
BECOME A CERTIFIED FRAMER MASTER
Earn 3 official certifications that show you don’t just know Framer, but you can
design, build, and execute real pixel-perfect sites.
Rated excellent by 900+ students
4.8
Lifetime access
14-day money-back guarantee
Stream anywhere
