Improvement of the “Grid layout”

Help us improve Penpot
1

It would be great if the “Grid layout” allowed manual creation of grid areas so that overlapping and superimposed areas could be created to achieve powerful and responsive superimposition effects without using “absolute” positioning, or even “z-index” on the areas.

2

@steveoriol do you have an example of what you’re trying to achieve here? (Perhaps a design that uses this layout but statically?)

You can use z-index on the grid elements (elements inside a grid) without using absolute positioning, which means you don’t need to use z-index on the areas themselves. But I may be misunderstanding what you’re trying to achieve!

3

Here is a practical example of what can be done using only the unrestricted definition of “grid-area” zones.
In this example, the “z-index” and “absolute” properties are not even used :wink:

https://codepen.io/steveoriol/pen/XJKpqWY

<div class="grid">
    <div class="background"></div>
    <div class="max740">
      <h1>Content</h1>
      <p>This is the responsive central area limited to a maximum width of 740px</p>
    </div>
    <div class="deco">
      <svg class="picto" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <path d="M20 80 Q50 20 80 80 L80 100 L20 100 Z" fill="rgba(255,255,255,0.8)" stroke="black" stroke-width="3"/>
        <circle cx="50" cy="50" r="10" stroke="black"  stroke-width="3" fill="white"/>
      </svg>
    </div>
</div>

and,

.grid {
display: grid;
grid-template-columns: 1FR 100FR 1FR;
grid-template-rows: auto 100px;
grid-column-gap: 0px;
grid-row-gap: 0px;
/* height: 100vh; /* for full viewport */
}

.max740 {
grid-area: 1 / 2 / 2 / 3;
max-width: 740px;
width: 100%;
background: rgba(0, 0, 0, 0.6);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
place-self: center;
color: white;
text-shadow: 0 1px 2px rgba(0,0,0,0.5);
font-size: 1rem;
font-weight: 500;
border-radius: 4px;
min-height: 250px;
text-align: center;
margin-top: 40px;
}

.background {
grid-area: 1 / 1 / 3 / 4; /* Cover all */
background-image: url(‘https://picsum.photos/1920/1080?random=1’);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

.deco {
grid-area: 1 / 2 / 3 / 4; /* Center + right */
display: flex;
justify-content: flex-end;
align-items: flex-end;
margin-bottom: 20px;
}

.picto {
width: 180px;
height: 180px;
flex-shrink: 0;
}
4

Aha, I think now I understand. While you could achieve this specific layout with workarounds, you want to be able to create grid areas that can overlap/share grid “cells”. This is possible in CSS, but not currently in Penpot. (Where you can create grid areas, but they have to occupy separate cells.) I think that’d make a good feature request!

5

Yes, that would be a great improvement! :star_struck:

1 Like
6

OK, I tried redoing the ‘https://codepen.io/steveoriol/pen/XJKpqWY’ in Penpot.

Well, it’s pretty much the same thing, although I find the code in Codepen simpler…

Try to.penpot (1.8 MB)

The biggest problem now is that I can’t figure out how to position the background photo.
Basically, how to do it on Penpot to define the CSS:
background-position: [top|bottom|center|(x)%] [left|right|center|(x)%]
In this case, I would like to define:
background-position: centre left;