search

gavinmcfarland / flex-gap-polyfill

A PostCSS plugin to emulate flex gap using margins
https://gavinmcfarland.github.io/flex-gap-polyfill/
Creative Commons Zero v1.0 Universal
143 stars 6 forks source link

Getting different behaviour from vanilla gap #30

Closed Zizico2 closed 3 years ago

Zizico2 commented 3 years ago

A flex column with a gap and with row-gap, behaves the same for my use case. With the polyfill it only works well with row-gap. Gap will make the column shift to the left. I'll try to make a simple reproduction and put it here when I have the time.

gavinmcfarland commented 3 years ago

Hi @Zizico2 it could be that the container has a margin and when gap is applied it's undoing the margin being applied by the container. This is because the polyfill uses negative margins to simulate the gap property. This should only happen when the margin is not defined inside the same selector as the gap property though.

This is a drawback of being a CSS only polyfill, unfortunately. However, there are a couple of things you could try to get around this.

  1. Create a separate wrapper for the margin so the polyfill doesn't interfere with it.
  2. Calculate the margin using calc() and referencing a CSS variable from the polyfill.

Once I can see an example I can suggest in more detail how to work around it, or if it's a bug or limitation.

Thanks!

gavinmcfarland commented 3 years ago

Hi @Zizico2 the latest version has been rewritten from the ground up and I think it could resolve this issue. Feel free to comment if you're still having issues.