Penpot Fest talks are now available online!
Watch the sneak peek

Flex Layout, best of both worlds

Flex Layout is Penpot’s ground-breaking responsive layout feature that makes Design and Code easier and faster.

Try our Flex Layout template

Play around and learn more about the perks of this magical feature!
Download playground template
Penpot's official launch
Don't know how to use templates in Penpot? Learn more

Better and faster collaboration between designers and developers

Flex Layout is a powerful collaborative feature in Penpot that allows designers to create their designs in a layout and it automatically shows as it is on the web page thanks to dynamic CSS flexbox web standards.

Let's walk through it

Whether you’re new to Flex Layout or not, there are quite a few functionalities that make Penpot Flex Layout unique. Check them out here!
Are you familiar with Penpot at all? Penpot is the first open-source design & prototyping tool that allows true collaboration between designers and developers. Explore the Penpot site to discover more.
How to use Flex layout? First steps...

Key features of Penpot Flex Layout

Absolute position

Sometimes you need to freely position an element in a specific place regardless of the size of the layout where it belongs. Now you can exclude elements from the Flex Layout flow using absolute position.

Smart spacing

Managing Flex Layout spacing is even more intuitive now! Visualize paddings, margins and gaps and drag to resize them. Even better! When creating Flex Layouts, the spacing is predicted by Penpot, speeding-up your design composition.

Z-index management

With the new z-index option you can decide the order of overlapping elements while keeping the layers' order. This is yet another capability that brings the power of CSS standards to your Penpot designs!

It’s a wrap!

This property is a useful tool for creating dynamic and adaptable layouts that can adjust, for example, to different screen sizes and device orientations. This feature determines whether flex items should wrap onto multiple lines or not if they exceed the available space within the container.

Grid CSS Layout. You didn't expect this!

A new exclusive CSS functionality is coming soon to Penpot. Grid layout will allow you to boost your designs even further. While developers naturally adapt to this feature within CSS Grid, it serves as a valuable tool for designers to bridge the gap between your ideas and the final web output that mirrors your design vision. Read more! Check out the live demo we showcased at Penpot Fest. It’ll blow your mind! Grid Grid Grid!