Grid Gap Problem

I have recently tried to create a grid layout using the grid/gap feature instead of css. I wanted to have 4 cells per row with wrapping enabled so I could add as many Cells as I need. So I tried setting the size of the cells to 25% stretch with a 16 px gap between them. The result was sadly, that the fourth cell was moved to the second row, leaving only 3 in the first. Setting the width to 24% worked, but resulted in a uneven “padding” on the right (Because the cells did not quite fill 100% of the available space). Is this behavior intended and if so, what would be a suitable workaround to have an even distribution using the grid/gap function? I could use 0px gaps and then use the blue cells as containers with individual content and 8px padding to achieve the effect, but that kind of defeats the purpose of the Gap feature.



1 Like

Unfortunately gap is not substracted from the 100% in CSS.

Using grid makes much more sense here.

For the pawrent container, add something like this:

display:grid;
grid-template-columns: repeat(auto-fill, minmax(300px,1fr));
grid-gap:40px;

And leave the items in the container to stretch 100%.

You can also control the height of the items by adding

grid-auto-rows: 100px;

and set the item height also to stretch 100%.

grid-auto-fill.zip (216.4 KB)

2 Likes

Thanks Tim,

I’ve been using the css method quite a bit in the past and it works well. I was just hoping to achieve a similar effect with the features built into Antetype directly since I often encountered the problem that new people joining my projects had trouble finding/understanding elements containing css. Since the css overwrites some properties set in the “regular” UI, it is easy to get stumped on why the elements are behaving differently than expected. I mention that during the onboarding process now, but the issue still pops up from time to time.

Since there will likely be more issues like this in the future (effects only achievable through css), maybe increasing the discoverability of css being used might be helpful. Maybe mark cells containing css more clearly in the property inspector or in the tree like you did with interactions. Then again, adding more and more icons to the cells in the tree might lead to clutter down the line. Maybe having the CSS field expanded by default is already enough.

1 Like

CSS overrides should be shown in the UI. This has been mentioned already and I believe is being taken into consideration.