CSS Grid

[intergalacticspacehighway]

Why?

• CSS grid provides us more control to position children in a two-dimensional layout system. It works as a complimemtary system to Flexbox. Official spec for more details/usage.
• There are a few open issues - [Feature] Support CSS Grid #867, CSS Grid Layout support react-native-community/discussions-and-proposals#90 and CSS Grids: Is there any interest in integrating a grid implementation? #47, which indicates community interest.

How?

By extending Yoga to support CSS Grid spec. The implementation is open to suggestions, improvements, including anything I might have missed. Some work in progress items are listed below.

Current scope

Ensure the implementation follows CSS Grid Spec.

Properties

• grid-template-columns
• grid-template-rows
• grid-column-start
• grid-column-end
• grid-row-start
• grid-row-end
• grid-auto-columns
• grid-auto-rows

Sizing Functions/Units

• minmax()
• auto
• Percentage
• Fixed (px unit)
• Flex (fr unit)

Future scope

• grid-template-areas
• grid-area
• masonry
• grid-auto-flow
• grid-column/grid-row shorthands
• repeat()
• More sizing functions/units (auto-fill, auto-fit, fit-content, max-content, min-content)
• Subgrid

Spec differences

• justify-content is set to flex-start in yoga by default. We need to introduce normal keyword to match with the spec. normal behaves as flex-start for flexbox and stretch in grid.
• Same as above for align-content, align-self, justify-self, justify-items, align-items. Introduce normal keyword

Notes for reviewer

• Main files that include grid layout algorithm are AutoPlacement.h, GridLayout.cpp and TrackSizing.h. Apart from these, most of the files are data structures to hold grid styles and gentest files.

[vercel]

@intergalacticspacehighway is attempting to deploy a commit to the Meta Open Source Team on Vercel.

A member of the Team first needs to authorize it.

[nicoburns]

Oo, I haven't looked at the implementation yet, but I wanted to point you at https://github.com/DioxusLabs/taffy/tree/main/test_fixtures/grid where we have 250+ test cases for CSS Grid in almost the same format as Yoga's gentests (Taffy was originally a port/rewrite of Yoga to Rust, and it's test generation setup is very similar).

There are a couple of slightly differences in the test format:

• Yoga has many test cases per file with id="test_name". Taffy has one test case per file with the filename being test_name.html.
• Taffy's tests are wrapped in HTML boilerplate which you'd need to strip out.

But the actual HTML snippets should be compatible, and you should be able to script a conversion fairly easily if you want to use them.

[intergalacticspacehighway]

Thanks @nicoburns. The tests were invaluable! There are a few tests which i haven't pushed which were failing because of some default styling in testsuite, looking into fixing those. And skipped some tests related to min-content/max-content sizing unit support as I kept it in later scope (which should be soon once the PR lands 😅).
Edit: just found i missed absolute and aspect ratio cases. Adding them.