CSS Grid Layout
CSS Grid Layout
Building layouts is easier than ever for both
designers and developers.
More info about license and contributing
Release 2.4 is live! Check out our Dev Diaries for all the updates
Learn more
Penpot responsive layouts: Best of both worlds.
CSS Grid Layout and Flex Layout are Penpot’s ground-breaking responsive layout features that make Design and Code work better and faster.
Find out why
Flex Layout
Flex Layout
Flexible and adaptable layouts brings the standard
CSS Flex power to designers.
More info about license and contributing
Don't know how to use templates?
Learn more
Better and faster collaboration between designers and developers
Based on open standards such as Flexbox and CSS Grid, these layout features bring the power of CSS to designers.
Designs are expressed as code so developers can integrate it easily in their workflows.
CSS Grid Layout: key features
Use columns and rows to distribute elements in the layout. Organize the content in a very flexible way and implement it easily into code.
More info on how CSS Grid Layout works
Rows and columns
Add and manage size and position of rows and columns in the layout. Then, organize the elements within the area.
Organize layouts and spaces
Place elements inside a grid layout by dragging them or paste them in a cell or area. Thanks to flex layout properties, those elements will adapt to the space given.
Auto or manual
Move around the elements of the grid in auto or manual mode. Regardless of the position, the grid will be expressed as code, making devs work so much easier!
CSS Grid Layout: applications
Flex Layout: key features
Resize, fit, and fill content and containers automatically to save time and gain precision. Create flexible designs that adapt easily to your desired layout.
More info on how Flex Layout works
Absolute positioning
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.
