Gap/row-gap/column/gap properties

[jacobp100]

Report

• I have searched existing issues and this is not a duplicate

In the drafts of box alignment level 3, there's the properties row-gap and column-gap that allow the user to specify the gaps between rows and columns.

It is a draft, so it might be premature to implement now. Do we want to support this now? (I can take a shot at it if I get time!)

[lucadegasperi]

I'd like to resurface this issue as the gap property is slowly getting browser support. https://caniuse.com/#search=gap I believe this would be a huge win for everyone and would make creating layouts a lot easier.

[lostpebble]

Yep, this really is one of the final missing pieces in most "flexbox" implementations. Having to balance out margins for inner elements, which sometimes change position etc., is really not a fun experience.

[ricokahler]

I think this should get revisited as well. Flex gap has landed in stable for both chrome and firefox: https://caniuse.com/flexbox-gap

[efoken]

Would be nice to have this as browser support grows.

[ricokahler]

Update: it landed in webkit too: https://bugs.webkit.org/show_bug.cgi?id=206767

[AndrewPrifer]

I suggest renaming the issue to "Support gap property" to reflect changes to the name. By the way Safari Technology Preview also supports gap now.

[lwyj123]

It's seems like the gap properties is supported in modern browsers. I think this issues should be review again.

[AndrewPrifer]

Gap just dropped in Safari too.

[josephtarbit]

Any updates on this?

[intergalacticspacehighway]

Created a draft PR on React native repo which includes gap related changes. Feedbacks are welcome 😄 react/react-native#32766

[jacobp100]

It looks promising! You'd need to do the PR here. I did have a stab at it, and there's a few differences:-

You'll need to add tests - the cpp files (here) are generated from html (here). They're run through Chrome to get the layouts, so it's very automatic.

I didn't think about doing this in getLeadingMargin. If that works, it makes it so much simpler. Let me know how the tests go!

I structured the gap like borders:-

https://github.com/facebook/yoga/blob/578d197dd6652225b46af090c0b46471dc887361/yoga/YGEnums.h#L78-L88

You'd end up with a gap property that would be an array of row and column. The advantage of this was you'd be able to set gap in react-native, and have it apply to both the row and column

[jacobp100]

But this is really cool to see! Really glad to have someone else working on it because I hit a brick wall with it. Happy to help out too.