CSS Grids: Is there any interest in integrating a grid implementation?

[FremyCompany]

Hi,

I'm the maintainer of the CSS Grid Polyfill https://github.com/FremyCompany/css-grid-polyfill/blob/master/src/css-grid/lib/grid-layout.js and I think your probject is awesome. I was wondering whether you would be interested to incorporate a css grid implementation in your project.

My implementation is independent of the fact it polyfills real CSS+DOM as the layout is performed on pure JS objects (which are imported from the DOM, and then exported to it), which is a good thing given your layout system doesn't use a similar DOM.

However, to the contrary of css flexbox (which you implemented), the syntax for defining css grids is rather complex and requires some kind of parser. If we want to avoid a dependency on a real css parser, a new (more JS-like) input format will have to be defined; it would be different (but could be similar) to how grids are defined in CSS (and it would require some work).

My questions for you are thus the following ones: Would you be interested by integrating css grid layout into your project? Is that matching your current interests at the moment? Given the code will require customizations to adapt to your needs, are you ready to spend some time defining with me the specifications of the input/output interfaces you would prefer, and possibly spend some time implementing or testing those interfaces with me?

Best regards,
François

[vjeux]

Hey François,

Thanks for reaching out :) Just looked at your project and it's super interesting.

I'll be honest, I'm not really interested in integrating CSS Grid into this project. I used css-layout as a lack of inspiration, it's not intended to reproduce the entire CSS spec.

However, I really want to look into extensibility points. For example, I'd love to be able to give a special layout function for a node, and then you can implement the layout algorithm of your choice, like CSS Grid.

[FremyCompany]

Great, I think working out an extensible model is what really matters in the end. Coupling multiple layouts is something I'm really looking for and a problem for which I haven't come with a solution to the problem yet. I'll try to have a deeper look at the code during the week-end; then we could have a discussion about the requirements and get started, I'm interested in contributing some time.

[vjeux]

Great :)

I don't think that anyone found a good way to mix and match layout algorithms, but if we can nail it, we'd be in SUCH a better place.

[FremyCompany]

Just wondering, is there any documentation of which files are generated by wich others for your project? That would probably save me time reading it, given it spans at least three programming languages ^_^

Also, just being curious, why use both C++ Java and JS in the same project? Was it a choice or was it to reuse existing components?

[vjeux]

We're using css-layout inside of React Native ( https://code.facebook.com/videos/368465899999310/react-js-conf-2015-keynote-2-a-deep-dive-into-react-native-/ ), the JS version is the canonical version that's tested against the browser to make sure it is working correctly, but is ultimately not the one being executed. Only C and Java are using in production

[FremyCompany]

I had a closer look at the code, and I think it's currently a hard fit for an extensible layout system, because it doesn't fit the requirements at this time. Here's a run-down of my thoughts on the project:

[+] It's great to see it support multi-directionality. I more or less left that out for my CSS Grid polyfill because I didn't want to understand the interactions between items of different directionalities (I'm not sure this is required for flex boxes, but I appreciate the fact you started the right way on this matter.

[-] The layout algorithm you wrote is very straightforward and doesn't account for some of the hard problems of css layout like min-width/max-width and elements whose height different in function of the width you choose for them. I understand that (for a project that has to ship at some point) it's great to remove constraints, as each added constraints comes with its own set of new abstractions and layers to implement, but I feel like the lack of pre-layout will be hard to fill in a relatively short amount of time as I fear it will require deep changes into the code itself.

I'll keep an eye open on the project, and will come back to the extensibility issue when it will have better tools to deal with it;

[polarathene]

As raising a new issue points out not to create a duplicate issue, I'm replying here instead.

Over 3 years since this was last closed, closing in on 4 years since it was originally created.

Has anything changed since in all this time that display: grid; could be valid to support?

There is the linked issue from over a year ago from the react-grid-hoc repo, which seems to try work around the lack of grid layout support in react-native(yoga), where containers to nest flexbox layouts in is required to workaround it.

It is the 11th top request(1st in regards to layout) at 180 votes on React-Native feature requests, the feature request was created in December 2017 with steady response from users throughout the past year.

It would be great to see this issue re-opened and considered again :)

[FremyCompany]

Just wanted to note that there's now a branch where I replaced the dom with a Houdini Layout worklet, showing that the layout code truly is independent of the dom tree and the invalidation process.

[damianobarbati]

@FremyCompany @vjeux would you reconsider this issue today? CSS Grid is not an option anymore and fits better then flex in most cases (also for single dimension grids).

Thanks for your efforts guys!

[JasCodes]

Agreed

[vjeux]

I’m no longer working on either yoga or react native so feel free to ignore me :)

[polarathene]

@vjeux Is there someone you might suggest to ping instead? Or should a new issue be opened?