The much-awaited and much-special Penpot’s Grid Layout feature has already been tried and tested by dozens of community members and we are already getting their first impressions. Hooray!
Some outstanding examples are the comprehensive analysis made by Canonical designers at Hacktoberfest or this video walkthrough made by @Louis. Also at the Penpot team, we will start this week digesting the results from the Grid Layout Beta Test. We’re getting extremely insightful feedback and intend to share the learnings here as soon as we have a debrief and we are already implementing improvements based on some of the suggestions made. One more example of how the community directly impacts Penpot’s roadmap.
In the meantime, we would like to use this space to allow us, community members, to have an open conversation related to Penpot’s Grid Layout. What are your impressions about Penpot Grid-Layout? What do you like the most? How can we improve it? What are your expectations? We would love to hear about anything you feel you would like to share.
For me, one of the first things I want to do once this will be released is to build a wireframes library (for desktop and mobile) intended to webdesigners that will use the grid layout feature.
I already started making this library with flex layout, but since many layouts I use are developed using grid, that would make more sense to have them as grids already at the design phase.
The Grid Layout feature in Penpot is fantastic, but I’ve noticed a limitation—I wish there were options to allow certain content to overflow from one cell to another. I’m unsure if such settings currently exist.
You can already overflow content using fixed cell sizes and negative margins on elements (the blue rectangle is an example). Are you expecting something different?
Here is my feedback (roughly replicating what I wrote in the betatest survey):
I looked for “grid” in the UI, but that is the grid-for-alignment feature not the grid-for-layout feature.
In the grid-layout feature, the icons are great (their icons show what change they trigger).
I like the pink edit overlay that enables adding columns/rows and shows the width indicators and the subtle highlights reacting to hover and other input.
My main probem is that there are a lot of options and lables that make only sense when one knows CSS, e.g. the FR length unit (a rather nondescript lable), the manual specification of area by name, or positioning by assigning grid-cell-numbers; this demands designers to learn a model that is created to be written rather than used by direct interaction. This does have no clean solution, but I would prefer having merely the parts of CSS Grid reflected that work well with a direct interaction model. (there is already an answer by @myfunnyandy on the original thread)
Yes of course I’ll submit it to be added to the Library as soon as it’ll be ready, I hope it will help others to save some time, I know in my case it will !
I’m excited to share some fantastic insights from our recent user test on the new grid layout - a project that couldn’t have been successful without your participation and support.
In October, when we announced the test, the response was overwhelmingly positive, we had almost 100 volunteers. A big shout-out to everyone who joined in, including those who were too late to the party and were not able to participate.
The feedback we gathered through our survey was incredibly insightful, with a rich mix of perspectives from designers, developers, and professionals from other areas.
The testing phase led us to identify numerous potential improvements, in different areas:
Bugs and Performance
UI improvements
Functionality Enhancement
Feedback for our support material
We listened to your ideas and the team has already worked hard to implement most of them. Here is a sneak peek of one of the improvements already developed by the team:
(contextual actions for better rows and columns management)
Additionally, we received numerous compliments on the new UI from users. This was an unexpected but welcome bonus, highlighting the appeal and effectiveness of the new design.
A massive thank you to our product team and every single one of you in the community who contributed. Your dedication and feedback are what allow us to keep pushing boundaries and improving.
A totally new user here.
20 years in digital design. I know everything. And I code e.g. Bootstrap.
OK, cleared not to have BS answers. Now my question-problem:
I draw the grid… a normal, 1400px 12-column grid.
I draw a rectangle (is it a “div” tool? Don’t know yet, I’m just using the browser app like I feel it should be used):
THE GRID GETS MOVED / DESTROYED!
If you wish to have the rectangle size adjust to the size of the grid cell instead, you can do so by selecting the option “Width 100%” under Grid Element.
Then you should use the column guides feature, they will act exactly as you expected. They are a bit down below the right panel. CSS Grid Layout is a way to organize content based on rules we set (just like flex layout), so it will always be like a cage for the content instead of a visual guide for us to draw over.
Yeah the name can be confusing, but the grid layout refers to CSS grid, a way to automatically organize elements in the canva in a maintainable way.
If you’re looking for a grid as a visual guiding system, use the option at the botton of the right side panel. You can draw columns, rows, or grids. Same name but two different things !
Hi y’all! I am excited with the new features but I am about to assume that Grid Layout do not work the way or for the uses I expected to.
I am designing a website and I wish Grid layout would help me to set a basic grid of colums and lines to order my elements. For now, I notice that I can set the grid, but for some reason it does not work as a space in which the components fits itself. It is actually working the way around: if my component is larger that a column, the grid (and all columns) reajust itself to adapt to the object.
I am doing something wrong? Shouldn’t “grid” works as a basic structure in which you fit elements? Why is it adjusting itself automaticly when I move my objects?
This is happening mostly when I use Fraction (FR) columns. I have a clue that this might be hapenning because of the unit I set. Though, this might be a core issue:
I need a % or a Fraction logic to make a responsive page. However, when I opt for % columns, the system do not respect the paddings I set (using pixels) to calculate percentages. This behavior automaticly let me to chose Fraction columns. However, FR unit seems extremely organic. Here is a picture to illustrate what I am saying:
What if anyone at penpot tries a tutorial on web responsive layout using Grid? Or anyone else on coomunity that figured it out
Other considerings:
1: Grid layout could automaticly calculate sizes based on paddings and board size. (it would be really really helpull)
2: I am not sure what would be a use case for different units on the same grid. If we are speaking of CSS coding, I imagine devs would get crazy to work on a layout that uses one column in %, two in Fraction and other in pixels. Am I wrong?
It would be great if you could add an option to configure the grid as RTL, so that the start point of the grid will be from right to left instead of left to right. Currently, even if the inner content is RTL, the grid settings are in the opposite direction.
Hello @Anat_Alon , thanks for your feedback, for now we don’t have a way to set all grid automatically to RTL, for now as soon as you create a grid you can align it to the right.
I’ll submit it to be added to the Library as soon as it’ll be ready, I hope it will help others to save some time, I know in my case it will !
