Figma: Vertical Wrap for Auto Layout
FigmaFigma added vertical wrap to auto layout, letting frames set to vertical flow overflow into a new column instead of extending past the frame boundary. The feature enables responsive multi-column layouts, such as checkbox lists, product blurbs, or bios, that adjust automatically as content is added, removed, or resized. It brings auto layout's vertical flow in line with CSS flexbox wrap semantics, closing one of the last remaining gaps between Figma's layout engine and how browsers actually render wrapped content.
Key Takeaways
- Vertical auto layout frames can now wrap into columns, closing a multi-year gap where only horizontal frames supported wrapping.
- The behavior is modeled directly on CSS flexbox's column-wrap semantics, making Figma-to-code handoff more predictable for engineers.
- Common patterns like checkbox lists, staff bios, and product blurbs are the primary use cases Figma called out for the feature.
- Layouts using vertical wrap stay responsive automatically as items are added, removed, or resized, without manual column recalculation.
- The release eliminates common workarounds designers previously used, such as rotating frames 90 degrees or setting artificial max-width constraints to fake vertical wrapping.
- This is the third auto-layout-to-CSS parity update in 2026 (following July's rendering-behavior update and August's spacing-distribution modes), showing a sustained push to make auto layout a closer 1:1 match for flexbox.
Multi-Column Layouts That Respond to Content
Figma introduced vertical wrap for auto layout, giving designers a native way to build multi-column layouts that stay responsive as content changes. Previously, auto layout's wrap behavior only worked in one direction: a horizontal frame could wrap overflowing items onto a new row, but a vertical frame had no equivalent way to wrap into a new column. Any frame set to vertical flow that ran out of room simply kept extending downward, forcing designers to manually rebuild layouts like checkbox lists, staff bios, or short product blurbs every time the content changed.
With this update, a vertical auto layout frame can now be set to wrap, and once the current column reaches the frame's available height, additional items automatically start a new column to its side rather than pushing the frame past its boundary. The layout stays intact as items are added, removed, or resized, so designers no longer need to recalculate column breaks by hand.
Matching CSS Flexbox Behavior
Figma framed the update explicitly around parity with CSS: vertical wrap in auto layout now mirrors how flexbox's flex-wrap property behaves when a flex container is set to a column direction. That distinction matters for teams handing designs to engineering, since a layout built with vertical wrap in Figma should translate far more predictably into flexbox code, with fewer manual adjustments needed to match the design at implementation time.
Why It Matters
The update continues a pattern of auto layout changes throughout 2026 aimed at closing behavioral gaps with CSS, following July's broader realignment of how auto layout renders relative to browsers and August's overhaul of spacing-distribution modes to map directly onto space-between, space-around, and space-evenly. Vertical wrap specifically targets a layout pattern that is extremely common in real interfaces (fixed-height cards or lists that need to flow into columns) but previously required workarounds such as rotating frames or manually constraining widths. Design systems teams building components like FAQ grids, tag lists, or bio walls stand to benefit most, since the layout now holds up automatically across varying content lengths and container sizes.