Layout Engines Finally Reach the Design Canvas
Design tools have spent years trying to approximate the behavior of CSS layout systems. Most have ended up with imitations that only get designers partway to production-ready results. Penpot has taken a different route: its latest 2.0 release includes a native implementation of CSS Grid Layout, following its earlier adoption of Flexbox. That makes it the first design tool to offer genuine implementations of both layout engines rather than simplified look-alikes.
The distinction matters because the real thing behaves like the real thing. When you build a layout in Penpot with Grid or Flexbox, the underlying CSS that eventually ships to the browser follows the same rules you designed against. There is no translation layer introducing unexpected results.
Why Grid Matters
Flexbox covers a lot of ground. For simple, linear arrangements—a row of buttons, a vertical stack of cards, a sidebar with its own internal structure—it is usually sufficient. In fact, most of the web gets by with it: as of this writing, only about a quarter of websites worldwide use CSS Grid, though that number is steadily climbing.
Grid becomes essential when you need control across two axes simultaneously. It lets you define rows and columns explicitly, assign elements to specific cells, and create layouts that would be clumsy or impossible to describe with a single axis of flexing. That level of control is what this release adds to Penpot's toolbox.
Building Layouts with CSS Grid in Penpot
A typical use case is a portfolio page with a fixed sidebar and a responsive gallery of images. That kind of structure wants Grid for the main two-dimensional arrangement, plus Flexbox for the sidebar's internal stacking.
Setting Up a Two-Dimensional Grid
Start by creating a grid with the Track Size tool. Each row and column gets a value expressed in FR, a unit that distributes available space proportionally. Equal 1FR values across all rows and columns split the canvas evenly. The unit is not limited to uniform splits: you can assign 2FR to one column and leave two others at 1FR, giving the first half the width and the other two a quarter each.
Elements are added by dragging them onto the canvas. Each item can be pinned to a specific grid cell or left to auto-position, filling the first empty slot in the layout.
Alignment and Spacing Control
The alignment options operate in both directions. You can make rows and columns shrink or grow to fit their contents, or force the contents to stretch to fit the grid itself. For the portfolio example, a sidebar column locked to a fixed width of 320px works well. The sidebar element then uses Flex Layout internally to handle its own vertical stacking, since that is a simple one-dimensional problem.
Named Grid Areas
Cells can be merged and grouped into functional regions with names. Creating a dedicated sidebar area in this way ensures it maintains its width and full height while the remaining cells adjust to whatever space is left when the overall layout is resized.
Spanning Multiple Cells
Individual elements are not limited to a single cell either. A featured image can be told to span four cells instead of one, creating a visual anchor within the grid while the rest of the gallery flows around it.
The result is the kind of intricate, responsive layout that would translate almost directly to a functional website. Recreating it in a typical design tool would not just be difficult—it would be impossible, because those tools do not model a true two-dimensional layout engine.
Going Further
If you want to experiment with the examples discussed here, Penpot has shared a playground file you can duplicate and inspect. A video walkthrough of Grid Layout is also available on YouTube, and the Penpot community forum is open for questions and feedback.
Real CSS support in a visual design tool closes a long-standing gap between how designers think about layouts and how browsers render them. Designers get to strengthen their working knowledge of the technologies behind their designs. Developers get files that behave predictably. Both sides work from the same standard, which is a better foundation for collaboration than everyone trying to interpret an abstraction of the real thing.
