WIP: Flex row & column gap still apply to container if switched to Grid

Browser: Chrome
OS: Windows 11

  1. Create a container
  2. Set the column and row gaps to 40px.
  3. Switch the container to be a Grid rather than Flex.
  4. Setup a grid.

Results: Although no values show in the Grid Gap field, the Gap values set for Flex is being applied.

Expected: Flex Grid vaules should not apply or show in Grid Gap field as placeholder values to clearly show that the Gap is being applied.


Thanks so much for your report!

I can reproduce the problem and have created an improvement task for it, as technically, it is not a bug, as no logic resets the settings as soon as you change the display value. However, I can understand that it can be very confusing when switching between flex and grid (this also applies to other settings that can be used in both areas, such as the flex align settings).

At first glance, this logic seems relatively simple, but it is not, as some settings overlap and some do not.

We already had a similar report on this, see: NO BUG: Container grid display styling written to css when have switched to flex - #2 by timmse

In the case of the gap, one possible solution would be to merge the row- and grid-gap of the flex settings into a “gap” field, as we do with the grid. However, I cannot promise you whether this is feasible.

Best regards,

1 Like