Grid Layout brings HTML to Penpot's table

At Penpot, we’re always pushing the boundaries of collaboration between designers and developers and I bet you’ve heard of our unique new upcoming feature CSS Grid Layout. This isn’t just another Penpot’s enhancement; Grid Layout is a game-changer for designers and developers. (And it’ll generate HTML code too! :exploding_head:) Let me explain it all.

A quick recap
We’ve been working on the amazing new feature for some time. But what exactly does CSS Grid Layout bring to the table?

With Grid Layout, you’ll harness the power of CSS Grid to craft stunning, responsive designs that closely mirror how developers work on layouts. CSS Grid Layout allows you to efficiently organize, align, and distribute items within a container. You can create rows and columns of elements, giving you fine-grained control over their expansion, alignment, and responsiveness to various screen sizes. It’s like having a developer’s toolkit right at your fingertips!

Helping designers and developers
This is a feature that feels natural to developers and the way they work on CSS grid. But what’s in it for designers? Well, imagine bringing your ideas closer to an end result on the web that stays true to your designs. Grid Layout will empower you to design with confidence!

Grid Layout will make developers’ work much easier and faster. Designers, on the other hand, can rest assured that their designs will be faithfully translated during implementation.

Grid Layout brings HTML generation to Penpot!
We all know Penpot generates code based on SVG standards. But we’re going a step further, Penpot will allow you to generate HTML code along with CSS to create a website by the click of a button! This new possibility was announced by Clara and Alonso, team members at Penpot, during their demo show at Penpot Fest.

Watch Alonso and Clara blowing everybody’s mind at Penpot Fest demo!

Watch it on Peertube.

We’re about to kick off the beta testing phase! We’re so grateful for our community volunteers who are helping us refine and optimize this groundbreaking feature.

Stay tuned for the official launch of Grid Layout – it’s not just a feature; it’s a design revolution! Together with the new HTML generation and other huge enhancements, it’ll take Penpot to another level.


With Penpot’s upcoming Grid CSS Layout I’d love to know designers or content producers that could help us show how amazing this new superpower for designers is going to be. Like every new killer feature, it demands proper “onboarding” material.