[Feature] Support CSS Grid

[polarathene]

Report

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

It's been advised to open a new issue (from this closed issue from 2015). Related react-native issue

It's been 4 years since the issue was closed. This issue is to request evaluating if supporting display: grid is worth reconsidering now.

It is the 11th 8th top request(1st in regards to layout, 8th 3rd trending) at 229(Mar 2019) 359(Feb 2020) votes on React-Native feature requests, the feature request was created in December 2017 with steady response of support from users since then.

[TomMarius]

I'd like to voice my support.

[polarathene]

I'd like to voice my support.

Great! Just give it a positive reaction like many others have done :)

(That goes for anyone else that has an itch to make a +1 comment)

[bnjm]

Is anyone aware of other efforts to make a cross-platform implementation of CSS Grid? I would love to support this. It's worth remembering that CSS Grid has a larger API surface area than Flexbox, so adding it here would be quite an undertaking and a big change to Yoga. Maybe a way forward would be a separate project which could serve as a reference or proof of concept.

[FremyCompany]

@bnjm The css grid polyfill is completely web-independent, and supports most grid features already.
#47

[rolme]

+1 to get CSS Grid as part of Yoga (and potentially part of React-Native)

[henrique25teles]

I would like that

[dlangston]

Any update on this?
It would be nice to have Grids as part of Yoga otherwise it seems very incomplete.

[RodRitter]

Please, this would be huge. Since most browsers support this in some way, we're starting to use CSS grid as a standard in our React dev. Would be great to be in sync with RN dev.

[damianobarbati]

@RodRitter same problem for me.

[polarathene]

Some of you might be interested to know about a year ago an alternative was announced called Stretch:

I led the Yoga team at Facebook solving exactly this problem. My team built the underlying cross-platform layout engine powering React Native as well as a handful of other internal and open source frameworks. Naturally when we started work on Visly we decided to base it on Yoga, a proven cross-platform layout engine. So why create stretch?

We wanted to move faster than was possible when building on top of Yoga. Due to Yoga powering most of Facebook’s mobile surfaces it is incredibly difficult to make any changes to the algorithm.

And 9 months ago, HackerNews thread, author replies:

Stretch doesn't really enable any new kind of layouts that yoga doesn't but it fixes some fundamental problems in Yoga where Yoga was not compatible with the web implementations.

Long term goal of Stretch is to support multiple layout systems including Grid layout I just started with Flexbox because I know that so well :) Look forward to tackling grid layout soonish (contributions / help very welcome).

Website: https://vislyhq.github.io/stretch/

---

While it's probably of no use to the majority here that probably want CSS Grid to land in yoga for usage in React-Native, anyone that would be open towards stretch as an alternative, I've raised a related tracking issue for CSS Grid support over on the stretch repo.

Almost a year in since creating this issue, it would be fantastic to hear back from a dev of this project, if there is any hope for seeing Grid support arrive in future.

[calumjames]

Agreed! It’s much harder to share components between web and native if we can’t use grid for component layout in one, when it’s such a lovely feature of making components on the web now.

…

Sent from my iPhone

On 10 Feb 2020, at 09:55, Rod Ritter ***@***.***> wrote:  Please, this would be huge. Since most browsers support this in some way, we're starting to use CSS grid as a standard in our web dev. Would be great to be in sync with RN dev. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[damianobarbati]

Any news on this? 🙏🏼

[polarathene]

The mentioned stretch project recently started discussing how to start implementing Grid support.

Doesn't seem like there's any interest from devs on yoga. Perhaps at a later date it may be possible to substitute yoga for stretch?

Just subscribe to the issue if you haven't already and you'll be informed of any news. No need to notify everyone with a new message asking, we see the same issue thread content as you 👀

Let's try avoid requests for updates, cheers 👍

[byteab]

sometimes playing with flexbox to make grid like design make a component really heavy. and it impact performance inside react native

[dnistreanu]

I'm fairly used to use CSS Grid instead of Flexbox in web development. Lack of support for CSS Grid is a deal-breaker to me.

[nativeforest]

i hope stretch substitute for yoga.

[mmdevcodes]

Would be a great addition

[ebouJ]

Update in 2020? Ooops it's almost 2021

[ghost]

Update in 2021 ？ 2022 will be come

[byteab]

hey yoga team is there any plan to support this feature. or would you mind to please open a proposal for it. Thanks

[polarathene]

Commenting here for the sole purpose of asking for updates or expressing interest doesn't serve any purpose or provide any value than all those that have done the same before you.

Please refrain from this behaviour.

It just annoys all those who are subscribed for notifications and actually hoping to see an update with positive news.

---

Before adding a comment and notifying everyone here, please consider the following:

• If you want to express interest and support for the feature, awesome! Please use the emoji reaction features on the original issue message up top. Additionally vote it up on the linked RN feature request page 👍
• If you feel compelled to +1, ask for updates, or anything like this. Please consider doing so through another channel.
  • To be heard any differently than what we've tried here, you must reach out to someone who can actually do something about it. It doesn't appear they will notice anything via this issue alone.
• No maintainer / collaborator has expressed interest in this issue to have the feature developed.
  • Nor has one chimed in with a reason against the feature to close the issue.
  • I will keep the issue open until one of these outcomes decides otherwise.
• The alternative (Stretch) seems to have become stagnant with no activity on the grid feature. If that changes and sharing an update here would be beneficial to notify all subscribers, let us know 👍

Someone has to want the feature enough to devote the time into making it happen and that likely won't happen without decent financial backing / incentive.

The best we can do is show demand for it as users (as described above)..... and be patient. Alternatively setup a bounty and pool funds into that.

[byteab]

@polarathene Ok, got it. sorry for that 😉.
if there is no traction on it. and those who could take this feature forward is not following the issue as you mentioned.
so please close the issue. there is no point on it

[damianobarbati]

@TheEhsanSarshar I would not say there's no traction on this, we have 600+ emoji on the top post.
What's the "emoji threshold" to consider the issue not-worthy from the users point of view?

For any team who built its web-application on css-grid feature, having react-native not supporting it is a deal breaker (and btw I seriously don't see any reason to create layouts with flex in 2021, beyond supporting IE11).

But if the yoga team is not considering this feature, a clean statement like "we are not working on this in the foreseeable future" would be much appreciated when closing this issue! 🙃

[nicoburns]

A bit of an update for everyone on this issue:

The alternative (Stretch) seems to have become stagnant with no activity on the grid feature. If that changes and sharing an update here would be beneficial to notify all subscribers, let us know

Stretch was forked as Taffy in May 2022 under the auspices of the bevy and dioxus projects, and is now seeing regular maintenance, as well as new feature development work.

It should be noted that unlike Stretch, Taffy does not currently have bindings to languages other than Rust. However, we are open to adding them, and would welcome contributors interested in developing and maintaining such bindings (and we'd be able to provide mentorship on the Rust side of things).

Is anyone aware of other efforts to make a cross-platform implementation of CSS Grid?

Also relevant to this issue: we have an in-progress implementation of CSS Grid! The CSS Grid implementation is mostly feature complete at this point, but there are still a few bits of functionality (like baseline alignment) and a lot of testing that needs to happen before we are ready to put out a stable release. For those of you who are interested in using a CSS Grid implementation as a library in their own (non react-native) projects, we have put out an alpha release that you could play with today. And you can track the progress of the CSS Grid implementation in tracking issue (DioxusLabs/taffy#204)

---

Those who are looking CSS Grid support in React Native specifically may be interested in RFC: Vision for Layout Conformance/Parity, which sets out React Native's vision for layout going forwards. As you can see, they have considered Taffy, but are not planning to adopt it in React Native. I also had some further discussion with @NickGerleman (who has recently taken over maintenance of Yoga, and has already been implementing some welcome and long overdue improvements to things like the build system) where it was explained that the primary reason for this is a strong commitment to bug-for-bug backwards compatibility in React Native's layout engine (on the basis that bugs caused by changes in layout will likely be silent and hard to detect) and a belief that it will be hard to maintain that if switching to a new layout engine (a belief I am inclined to agree with FWIW).

Thus, in terms of getting CSS Grid support into React Native, it seems like the best path forwards may be porting Taffy's implementation into Yoga. This is by no means a small task, and would involve refactoring the existing Flexbox implementation to interoperate with another layout algorithm (while maintaining bug-for-bug compatibility with the existing implementation - possibly behind a flag), as well as implementing the grid algorithm itself. But I think it is achievable with enough effort, and it would be aided by the fact that Taffy is a derivative of Yoga and that the structure of the two projects is still largely similar.

[NickGerleman]

It would be amazing to see this materialize. CSS Grid is something the React Native ecosystem has wanted for a long time, and this thread has many other users of Yoga who would benefit from it as well. I have also suspected CSS Grid would be a valuable enough addition to React Native that we could use it as a tool to start driving users to migrate their apps to conformant behavior.

As I'm sure you can tell by the other thread "how can we do this safely" is very top-of-mind. These sorts of shifts have to be done piecemeal, but I do think we have concrete ways to do them. E.g. WPT fixtures for validating the conformance of new changes, or perf testing for any sort of major algorithm change (I don't have confidence the current tests would catch many real-world issues here).

refactoring the existing Flexbox implementation to interoperate with another layout algorithm (while maintaining bug-for-bug compatibility with the existing implementation - possibly behind a flag)

My ideal would be for Yoga to be conformant by default. The fear of behavior changes has been a stall on Yoga's development that we need to move past, but we need to be smart about it.

The model I have been exploring for that is that we:

1. Add the change, behind a YGExperimentalFeature
2. Add a branch in code, to set a flag on the Node layout result if the old path was used and would result in a layout change under the new path
3. Expose the result under an API YGNodeLayoutAffectedByQuirk
   1. Call this within app code, and fire an event if ever true
4. Measure % sessions in some real apps where we would see a shift
5. Add the fix, with a legacy flag if there is carnage (some threshold we will need to define 😉)
6. (In React Native) If there was enough carnage for a flag, lock it behind StrictLayout

Have some work drafted to start doing this for 7e96b65, adding YGQuirkAbsolutePercentageAgainstWrongEdge and YGQuirkTrailingColumnMarginIncorrect.

There are also some apps and frameworks inside of Meta which depend on the latest Yoga, but are no longer being actively developed. They won't see any benefit from the new things happening, and are one of the larger risk-areas to our own usage since they are more eyes-off, so I have been working to see if I can freeze them on an older version of Yoga to give a little bit more breathing room to make changes.

[nicoburns]

The stable 0.3 release of Taffy with CSS Grid was released yesterday. So it's now ready both for production usage, and for porting should anyone wish to take that on.

---

@NickGerleman

They won't see any benefit from the new things happening, and are one of the larger risk-areas to our own usage since they are more eyes-off, so I have been working to see if I can freeze them on an older version of Yoga to give a little bit more breathing room to make changes.

It has occured to me that the first step towards supporting CSS Grid in Yoga would be refactoring the flexbox implementation such that when it needs to measure children it is able to call into another algorithm rather than always calling recursively into itself. And if we're making this change anyway, I'm wondering if it would make sense to duplicate the flexbox algorithm into "legacy flexbox" (frozen in the current state) and "modern flexbox" (where we could go to town on the breaking changes - perhaps with an effort to get it quite close to standards compliant for the first release so that the breaking changes are mostly a one-off rather than an ongoing thing). This might be simpler than trying to feature flag everything on a fine-grained level...

Taffy uses this trait for this purpose, and in C++ you'd presumably want to use an interface. Making the algorithm logic generic over an interface provides two other benefits:

• It decouples the algorithm code from the node storage code, meaning that if Yoga users already have their own tree they can lazily convert styles from that tree into Yoga's format rather than needing the eagerly duplicate everything into a yoga-specific tree.
• It allows users of Yoga to take control flow back between each node in the tree and inject their own logic at this point. This could be logic like switching between strict/legacy modes, it could be calling into entirely different layout logic (e.g. FlexLayout, Taffy, or non-css layout modes like AutoLayout, but also things like text layout). It therefore also subsumes the need for MeasureFuncs as it basically is a more powerful variant of MeasureFuncs.

Taffy offers both a low-level API where the user of the library implements the above trait and handles things like caching and tree iteration logic themselves and a high-level API akin the one Yoga currently offers.

[damianobarbati]

@nicoburns how can someone use taffy in react-native? It's not completely clear to me.