Figma: Grid Hug and Fractional Units
FigmaFigma updated its Grid auto-layout with two long-requested capabilities: Hug sizing and fractional units. Hug allows grid columns and rows to automatically resize based on their content, similar to how auto-layout frames work. Fractional units let designers allocate proportional shares of available space across columns and rows, mirroring CSS fr units. The update also adds columns and rows editing directly in the properties panel and keyboard controls for repositioning objects within grids.
Sources & Mentions
2 external resources covering this update
Overview
On December 3, 2025, Figma shipped a meaningful update to its Grid auto-layout system, introducing two sizing primitives that were notably absent from the initial Grid beta: Hug and fractional units (fr). Together, these additions bring Figma's grid capabilities significantly closer to the flexibility of native CSS Grid, addressing some of the most frequently requested items from the design community.
Hug Sizing
The Hug option causes grid columns and rows to automatically resize to match the dimensions of their content. This mirrors the behavior of "Hug contents" in regular Figma auto-layout frames and removes the need to manually adjust column or row sizes when content changes.
Practically, this means a card grid can have rows that grow vertically to accommodate different content heights without requiring the designer to manually adjust grid definitions — a workflow improvement that matters significantly when designing data-driven layouts or prototyping content-variable screens.
Fractional Units
Fractional units (fr) allow designers to allocate proportional shares of the remaining space in a grid container. Setting a column to 1fr gives it one equal share of available space; setting another to 2fr gives it twice as much. This mirrors the CSS Grid fr unit directly, making it far easier to design layouts where columns scale proportionally to the container width.
Combined with Hug, this creates a more complete responsive grid toolset: columns can either track their content size or claim a proportional slice of available space, rather than being locked to fixed pixel values.
Properties Panel Integration
Grid columns and rows can now be viewed, edited, and bulk-adjusted directly within the Figma properties panel. Previously, adjustments required navigating into a separate grid configuration flyout. Bringing these controls into the properties panel reduces context-switching and makes grid management faster, particularly when working across multiple frames.
Keyboard Navigation
Designers can now reposition objects within a grid using keyboard controls. This is a quality-of-life improvement for grid-dense layouts where dragging objects between cells is imprecise or slow.
Context
When Grid auto-layout first launched, it was limited to fixed pixel values or "Auto" sizing (distributing space equally). The absence of fr units and Hug was noted by the community as a significant gap compared to CSS Grid. This December update addresses both limitations, making Grid a more production-representative layout tool for teams that design with responsive web layouts in mind.