WIP: After converting flex to Grid, the Gap value still applies

Browser: Chrome 134.0.6998.178
OS: Windows

Hi bricks team,

As mentioned in the title, after converting flex to Grid, the Gap value is still applied. It is even present in the front-end css but it is crossed out. Please see the video below.

I noticed that long time ago too

but because it is valid css value handling I didnt care about it

I am just thinking about css perspective not ux perspective

if we think from ux perspective yes it feels a bit weird when this happens

but still not sure if this counts as bug ¯\ _ (ツ) _ /¯

1 Like

Hi @HOSEIN,

Thank you for noticing this. I can reproduce the issue locally, and I’ve created a task for that. It would be nice if the control that are hidden (Row & Column gap), would not apply to the frontend.

Thank you,
Matej

1 Like

I think gap value should keep showing after switching to the grid

2 Likes

Agreed, I think we should also have (purely for convenience) row and column gap in the GUI for grid, rather than just a universal gap, as there are manu use cases where you’d want one to be a different value

No I didnt say that

GAP property is same for both. Value should keep showing and not cleared.

spliting GAP for both is the wrong way to look at it since there is no multiple GAP property for flex or grid. it is the same property. GAP itself doesnt care if it is used for flex or grid.

Issue is value is not showing and it should just keep showing the value after switching thats the expected behaviour.

grid-gap is a shorthand property for row-gap and column-gap. Therefore, the field allows for two values, where the first is the row, the second the column gap. If there’s only one value, it applies to both.

3 Likes

Brilliant! I had no idea it worked like that - here was me writing it manually :sweat_smile:

The Gap control approach in Grid is great because it just makes things easier. But is there a plan to make Gap controls in other layouts look like Grid?

I just wasted a lot of time because of this and align-items wouldn’t work in grid because it was set in flex. :slightly_smiling_face: