Hi I am having difficulty understand why in Grid layout on the right side panel Justify Items Stretch have no effect on grid elements unless the elements itself set to Fill horizontal & vertical. When I make the parent grid Not to stretch but the element set to Fill it ignores the parent rule and it stretches. If this is normal behaviour then why the option is there since it has no control over the elements?
1 Like
I think this might be a good point! (It’s Friday evening here, so I hope my brain is working…)
Technically, Penpot is following the behaviour of CSS. When you set stretch on your grid container, the code changes, applying justify-content: stretch;/align-content: stretch; to the element. And correctly, alignment and justification (via fill) applied to the grid items overrides that of the grid container.
However, as a grid item always has its own alignment and justification/fill properties (even if neither fixed, fit, or fill is active, elements behave as fixed by default?) the stretch option on the container is a bit redundant? I might be wrong, but I’ve tried different elements and I also can’t find a use case where stretch on the grid container can make a difference?
This is how stretch is explained for align-contents on MDN:
If the combined size of the items along the cross axis is less than the size of the alignment container, any
auto-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed bymax-height/max-width(or equivalent functionality), so that the combined size exactly fills the alignment container along the cross axis.
1 Like
