CSS Grid by intergalacticspacehighway · Pull Request #1865 · facebook/yoga

intergalacticspacehighway · 2025-11-17T06:25:25Z

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.

cc - @joevilches @NickGerleman

vercel · 2025-11-17T06:25:30Z

@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 · 2025-11-24T01:57:46Z

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 · 2025-11-25T02:30:57Z

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.

nicoburns · 2025-12-07T18:02:13Z

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

NickGerleman

I want to take a closer look at all of this, now that I'm back from leave, but overall it seems pretty sane on a code level, and it seems like it is based on specced behavior, and well tested (I could see a few hundred fixture based tests with grid_ prefix passing).

Want to import it into internal tooling, which will run some more tests (though this seems pretty self-contained to not effect other display types), and help navigate all the generated files better than GitHub can.

NickGerleman · 2026-02-17T09:17:43Z

gentest/gentest-driver.ts

 import readline from 'node:readline/promises';
 import signedsource from 'signedsource';

+async function findHtmlFixtures(dir: string): Promise<string[]> {


nit: consider using either native fs.glob(), or the glob libraries pulled in by the package or repo to do this

Done - 578d607

NickGerleman · 2026-02-17T09:52:41Z

yoga/style/Style.h

@@ -753,6 +853,16 @@ class YG_EXPORT Style {
  Dimensions maxDimensions_{};
  StyleValueHandle aspectRatio_{};

+  // Grid properties
+  GridTrackList gridTemplateColumns_{};
+  GridTrackList gridTemplateRows_{};
+  GridTrackList gridAutoColumns_{};
+  GridTrackList gridAutoRows_{};
+  GridLine gridColumnStart_{};
+  GridLine gridColumnEnd_{};
+  GridLine gridRowStart_{};
+  GridLine gridRowEnd_{};


What does this translate to, in terms of size of yoga::Node?

Tested with sizeof, yoga::Node went from 592 bytes (current main) to 728 bytes (this PR).
GridLine = 8 bytes, GridTrackList = 24 bytes. GridTrackList is vector of GridTrackSize and GridTrackSize is 28 bytes. Also, new enums are added in align, justify and display, so total init yoga::Node comes to 728 bytes.

NickGerleman · 2026-02-17T10:15:48Z

yoga/algorithm/Align.h

Can we do this now for Flex?

Suggested change

// Fallback to safe center. TODO (T208209388): This should be aligned to

// Start instead of FlexStart (for row-reverse containers)

case Align::SpaceAround:

case Align::SpaceEvenly:

return Align::Start;

Yes, we can do that. Currently these are kept no-op for flex layout here. (Line no. 1831 CalculateLayout.cpp). Can implement in another PR.

vercel · 2026-02-18T01:36:26Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
yoga-website	Ready	Preview, Comment	Feb 25, 2026 0:19am

meta-codesync · 2026-02-18T01:57:52Z

@NickGerleman has imported this pull request. If you are a Meta employee, you can view this in D93552310.

NickGerleman · 2026-02-21T00:04:06Z

There are some errors when I import this into fbsource, bc of formatting, and some extra warnings enabled (like -Wconversion flagging sign change).

I'm going to have Claude do some automated fixup of those (should be mechanical), then have it split and resubmit this in a few parts, so we can review each piece. The files are mostly fixtures, but review tools have been struggling with this change 😅

NickGerleman · 2026-02-25T08:36:13Z

I exported the split version, with mechanical changes, to appease all the various linters or checks in Meta monorepo, and to be small enough to review/merge each piece: https://github.com/facebook/yoga/pull/1887/commits

Summary: Add the foundational data types, enums, style properties, and C API for expressing CSS Grid layouts in Yoga. Includes: - Grid style types (GridLine.h, GridTrack.h, GridTrackType.h) - Updated enums (Display::Grid, Align::Start/End, Justify::Auto/Stretch/Start/End) - Grid event (LayoutPassReason::kGridLayout) - Style property accessors and member variables - Public C API (YGGridTrackList.h/cpp, YGNodeStyle grid setters/getters) - Layout helpers updated for new enum values (Align.h, AbsoluteLayout.cpp, CalculateLayout.cpp/h partial) - Node.h: relativePosition made public - React Native mirror of all C++ changes Differential Revision: D93946262

Summary: Add the core grid layout computation and integrate it into the layout dispatcher. Includes: - AutoPlacement.h: auto-placement algorithm for grid items - GridLayout.h/cpp: grid layout entry point - TrackSizing.h: track sizing algorithm - CalculateLayout.cpp: grid dispatch block and #include - CMakeLists.txt: add algorithm/grid/*.cpp glob - React Native mirror of all C++ changes Differential Revision: D93946253

Summary: Add grid layout benchmarks. Includes: - YGGridBenchmark.c: 14 benchmark scenarios - benchmarkgrid: shell script to run benchmarks - CMakeLists.txt: benchmarkgrid target Differential Revision: D93946260

Summary: Add hand-written C++ tests for the grid layout algorithm. Includes: - Hand-written tests: AutoPlacementTest.cpp, CreateGridTrackTest.cpp - Modified existing tests: YGAlignBaselineTest.cpp (+3 grid baseline tests), YGHadOverflowTest.cpp (+1 grid overflow test) Differential Revision: D93946259

Summary: Add Java/Kotlin bindings for CSS Grid support. Includes grid API classes (YogaGridTrackList, YogaGridTrackValue, YogaGridTrackType), JNI bridge updates, enum changes (YogaDisplay, YogaAlign, YogaJustify). Also includes React Native Android mirror of all Java/Kotlin changes. Differential Revision: D93946256

Summary: Add JavaScript/WASM bindings for CSS Grid support. Includes embind bindings, TypeScript types (YGEnums.ts), Node wrapper updates (wrapAssembly.ts). Existing generated JS tests are updated to import GridTrackType. Differential Revision: D93946255

Summary: Update gentest scripts to support CSS Grid properties. Adds grid style extraction, grid property setup, display:grid handling, and grid-aware LTR/RTL fixture support to the C++, Java, and JavaScript test emitters. Differential Revision: D93946258

Differential Revision: D94005983

Summary: Add HTML fixture files for CSS Grid tests and generated test output for C++, Java, and JavaScript. Includes: - HTML fixture files defining grid layout test cases - Generated C++ tests (YGGridTest.cpp, YGGridTestFlows.cpp, ~150 individual test files) - Generated Java tests (YGGridTest.java, YGGridTestFlows.java, ~150 individual test files) - Generated JavaScript tests (YGGridTest.test.ts, YGGridTestFlows.test.ts, ~150 individual test files) Differential Revision: D93946254

Summary: Pull Request resolved: facebook#1887 Add grid property support to the Yoga Playground website component. Includes: - Grid display mode support - Grid template columns/rows properties - Grid auto columns/rows properties - Grid column/row start/end properties (including span support) - Grid track value parsing (auto, fr, %, px, minmax) Differential Revision: D93959518

meta-cla bot added the CLA Signed label Nov 17, 2025

intergalacticspacehighway force-pushed the css-grid branch 6 times, most recently from 74c932a to 3ad6a75 Compare November 20, 2025 18:34

sohcah mentioned this pull request Nov 26, 2025

Missing support for various CSS Grid css properties tamagui/tamagui#3686

Open

intergalacticspacehighway force-pushed the css-grid branch 3 times, most recently from 5366a48 to 02aa523 Compare December 7, 2025 17:02

intergalacticspacehighway marked this pull request as ready for review December 8, 2025 14:03

facebook-github-bot added the Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team. label Dec 8, 2025

intergalacticspacehighway force-pushed the css-grid branch 3 times, most recently from 196d320 to 32b7899 Compare December 8, 2025 15:46

cortinico requested a review from joevilches December 10, 2025 17:14

intergalacticspacehighway force-pushed the css-grid branch from 2d76996 to 9d1d1ae Compare December 13, 2025 17:15

NickGerleman reviewed Feb 17, 2026

View reviewed changes

NickGerleman and others added 3 commits February 25, 2026 16:51

CSS Grid 3/9: Grid benchmark

bbee424

Summary: Add grid layout benchmarks. Includes: - YGGridBenchmark.c: 14 benchmark scenarios - benchmarkgrid: shell script to run benchmarks - CMakeLists.txt: benchmarkgrid target Differential Revision: D93946260

NickGerleman and others added 7 commits February 25, 2026 16:51

Rewrite gentest from in-browser JS to Node.js/TypeScript

6cf3357

Differential Revision: D94005983

vercel bot deployed to Preview February 25, 2026 11:28 View deployment

intergalacticspacehighway force-pushed the css-grid branch from 79fe6ec to e97b4fd Compare February 25, 2026 12:16

vercel bot deployed to Preview February 25, 2026 12:19 View deployment

+// Fallback to safe center. TODO (T208209388): This should be aligned to
+// Start instead of FlexStart (for row-reverse containers)
+case Align::SpaceAround:
+case Align::SpaceEvenly:
+  return Align::Start;

Conversation

intergalacticspacehighway commented Nov 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Why?

How?

Supported APIs in this PR

Properties

Sizing Functions/Units

Unsupported APIs (Future scope)

Spec differences

Notes for reviewer

More

Uh oh!

vercel bot commented Nov 17, 2025

Uh oh!

nicoburns commented Nov 24, 2025

Uh oh!

intergalacticspacehighway commented Nov 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

nicoburns commented Dec 7, 2025

Uh oh!

NickGerleman left a comment

Choose a reason for hiding this comment

Uh oh!

NickGerleman Feb 17, 2026

Choose a reason for hiding this comment

Uh oh!

intergalacticspacehighway Feb 17, 2026

Choose a reason for hiding this comment

Uh oh!

NickGerleman Feb 17, 2026

Choose a reason for hiding this comment

Uh oh!

intergalacticspacehighway Feb 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

NickGerleman Feb 17, 2026

Choose a reason for hiding this comment

Uh oh!

intergalacticspacehighway Feb 17, 2026

Choose a reason for hiding this comment

Uh oh!

vercel bot commented Feb 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

meta-codesync bot commented Feb 18, 2026

Uh oh!

NickGerleman commented Feb 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

NickGerleman commented Feb 25, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

intergalacticspacehighway commented Nov 17, 2025 •

edited

Loading

intergalacticspacehighway commented Nov 25, 2025 •

edited

Loading

intergalacticspacehighway Feb 17, 2026 •

edited

Loading

vercel bot commented Feb 18, 2026 •

edited

Loading

NickGerleman commented Feb 21, 2026 •

edited

Loading