Just released. Figma Grid now supports fractional (fr) units.
This was very high on my wishlist. Why this matters š
What fr units do in Figma
A fractional unit fr is a fraction of the available space.
Instead of fixed widths, the grid splits leftover space proportionally.
Until now, in auto layout, āFill containerā meant everything behaved like 1fr. Equal columns. Always.
Where this comes from
Figma Grid is based on CSS Grid, where fr Units are fundamental.
In code, you can give columns different weights like 1fr, 2fr, or 0.5fr, and the browser handles the math.
Now Figma does the same.
Why this matters
We can now design real column ratios, not just visually approximate them.
Layouts scale better, grids behave like actual CSS grids, and handoff gets (a little bit) cleaner.
The biggest impact happens when using Figma Sites, for sure. Everything is automatically translated into fractional units in CSS Grid on publishing, giving us much more flexibility and a more solid design output in the browser.
Tiny unit. Big shift.
Designing is moving closer to how the web actually works.
Weāre talking about fr unitsā¦ but what even is CSS Grid?
Most designers think āgrid = columns.ā Define columns, place stuff inside.
Thatās not how the web thinks.
When developers say āgrid,ā they mean CSS Grid. And CSS Grid isnāt a column system; itās a system of grid lines. Those lines create cells.
Think bento box ā the good one.
You can move dividers, add compartments, merge them, and resize them.
Thatās why grid items can span, sometimes overlap, and land on exact positions. If grid lines and units arenāt in your head, spans in Figma will always feel like witchcraft.
Figma is drifting closer to real CSS Grid. The old columns-only model wonāt survive.
š ā I cover all of this in my Figma responsive design course in more detail.
So is responsive design in Figma the same as in CSS?
No. Design tool layout will never match the browser. Not Figma. Not Penpot. Not any of them.
I love grid. I love CSS. I love design tools. And the push toward better alignment is right. Auto Layout mapping to Flexbox is huge. FR units are great. This is progress.
But CSS isnāt a static layout system. Itās a rule-based engine that reacts to content, space, language, and context. Design tools can model that. The browser actually performs it. And that is ok, but as a designer, you need to understand the basics.
Design tools represent layout.
The browser performs layout.
That gap matters and needs to be dealt with!
So what does this mean for designers?
You donāt need to write production code, but you do need to understand the basics. Flexbox. CSS Grid. Container queries. Enough to think in rules, not pixels, and to know where Figma ends and the browser takes over. Thatās where real conversations with developers start.
Below is a conference talk I gave at Smashing Conference Antwerp last year, breaking down the essential CSS concepts designers should understand, how they map to Figma, and where collaboration with development is non-negotiable.
|
Also, all my courses on moonlearning.io are built around this too, from layout and typography to variables, always with the technical reality in mind. Check them out!
Moonlearning news:
Upcoming Talks & Workshops
Building with AI for everyone. An introduction to Lovable. FREE
Sign up here for free ā Online, Jan 20th 2026 š„ļø
Freelance Unlocked 2026
Conference Talk ā Berlin, Germany š©šŖ
Smashing Conference, April 2026
Conference Talk ā Amsterdam, Netherlands š³š±
See all workshops and events -->
Want to learn more about Figma, UI and Building?
Get a moonlearning.io membership today and access all courses, from beginner to pro, covering Figma, UI and UX principles, and how to not only design but also build your own websites and products. 
Responses