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, (feature) CSS grid layout react-strict-dom#1 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.

Supported APIs in this PR

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)

Unsupported APIs (Future scope)

To limit the scope of the PR below features are omitted. We can introduce them gradually.

• grid-[column|row]-[start|end] for absolute grid items. Right now, grid container can only be the containing block for absolute items.
• 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|align]-content is set to flex-start in yoga by default, it behaves as start for grid. We can introduce normal keyword which is the default keyword for these properties. It's not introduced in this PR. Visually it should behave the same.
• Yoga currently does not support min-content constraint (for performance reasons iirc as it can be an expensive operation for Text nodes). So we're using max-content for intrinsic item size calculations for intrinsic track size operations. We can revisit this if we add min-content support in yoga.

Notes for reviewer 🙏

Main files that include grid layout algorithm are:

• AutoPlacement.h - Implements Grid Placement Algorithm
• TrackSizing.h - Implements Grid Sizing Algorithm and Track Sizing Algorithm
• GridLayout.cpp - Grid layout entry point. Calls AutoPlacement, TrackSizing and performs final layout of grid items.

More

• The algorithm performs well in preliminary benchmarks and includes fast paths for many common cases, but there is a room for improvement. I have skipped some small optimisations for better readability/spec adherence. These can be added gradually. Also, Nico mentioned Taffy has grid benchmarks, so we can test against it.
• This PR adds additional test cases (166 out of 260) from Taffy. Thanks to Nico again!. The remaining 94 tests from Taffy includes features that are not in the current scope of PR.
• There are some redundant testcases which were added earlier. I will identify and remove some of them.

cc - @joevilches @NickGerleman

[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.

[nicoburns]

@intergalacticspacehighway I see you're adding benchmarks, and wanted to note that we have comparative benchmarks between Yoga and Taffy over at https://github.com/DioxusLabs/taffy/tree/main/benches which work by using the Rust bindings to Yoga (https://github.com/bschwind/yoga-rs)

Currently only the Flexbox benchmarks have a Yoga version, but I would be very interested to see this extended to the Grid benchmarks now that Yoga is getting Grid support.