Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
FremyCompany opened this issue Feb 12, 2015 · 14 comments

Comments

@FremyCompany
Copy link

commented Feb 12, 2015

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

This comment has been minimized.

Copy link
Contributor

commented Feb 12, 2015

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

This comment has been minimized.

Copy link
Author

commented Feb 12, 2015

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

This comment has been minimized.

Copy link
Contributor

commented Feb 12, 2015

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

This comment has been minimized.

Copy link
Author

commented Feb 12, 2015

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

This comment has been minimized.

Copy link
Contributor

commented Feb 12, 2015

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

This comment has been minimized.

Copy link
Author

commented Feb 15, 2015

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

This comment has been minimized.

Copy link

commented Nov 26, 2018

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

This comment has been minimized.

Copy link
Author

commented Nov 26, 2018

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

This comment has been minimized.

Copy link

commented Jan 25, 2019

@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

This comment has been minimized.

Copy link

commented Mar 3, 2019

Agreed

@vjeux

This comment has been minimized.

Copy link
Contributor

commented Mar 3, 2019

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

@polarathene

This comment has been minimized.

Copy link

commented Mar 4, 2019

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

@vjeux

This comment has been minimized.

Copy link
Contributor

commented Mar 4, 2019

If you could open a new issue I think that would be best.

@polarathene polarathene referenced this issue Mar 5, 2019
1 of 1 task complete
@polarathene

This comment has been minimized.

Copy link

commented Mar 5, 2019

I've opened a new issue here for anyone who wants to follow. Hopefully an active dev for yoga will chime in there :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
5 participants
You can’t perform that action at this time.