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.

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.

…bleTracks

…g block calculation

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	Error		Feb 18, 2026 1:38am

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 😅

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

Grid WIP

33030ec

intergalacticspacehighway force-pushed the css-grid branch 4 times, most recently from c394ca6 to 69cf662 Compare November 19, 2025 05:53

grid-auto-columns and grid-auto-rows

ded011f

intergalacticspacehighway force-pushed the css-grid branch from f5dc467 to ded011f Compare November 20, 2025 14:44

intergalacticspacehighway added 2 commits November 20, 2025 21:05

add justify content stretch and more test cases

acdc92b

Add more grid layout tests

3ad6a75

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

intergalacticspacehighway added 8 commits November 21, 2025 07:06

add span syntax support and test

be8033a

add resolved grid item area and add more testcases

8d9dbdb

fix auto percentage testcase

19ca203

use common distribute space for affected sizes

58c1262

refactor distribute space

18a19ae

percentage track initialisation and test

a966611

fix aspect ratio and add more testcases

31aa583

absolute child positioning, display none and display contents testcases

8e0fbbb

intergalacticspacehighway added 9 commits November 24, 2025 09:11

negative space gap taffy test

64ca472

fix padding rtl offset and add taffy test

fe9ffe1

fix alignment when free space is negative and add fixture

c6f5e3c

align content space evenly negative space distribution

d9d1c85

align items tests

5805562

add more testcases from taffy

0cb3bf1

justify content testcases

031e49e

margin test cases from taffy

956cc29

minmax auto tests

0f410f9

intergalacticspacehighway added 2 commits December 7, 2025 18:43

fast path for span 1 items

96d938f

performance - early exit for flexible and intrinsic tracks

02aa523

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

add preliminary benchmark

7ceda03

intergalacticspacehighway added 4 commits December 8, 2025 09:07

simplify intrinsic measure functions and add spec comments

d3d531f

optimisation - early continue in accomodateSpanningItemsCrossingFlexi…

ad21660

…bleTracks

optimisation - early return in some track sizing steps

e83b9c2

improve aspect ratio handling and add testcases

3ef0b41

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 2 times, most recently from 087b644 to 196d320 Compare December 8, 2025 15:41

more tests

32b7899

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

intergalacticspacehighway added 2 commits December 9, 2025 20:52

optimisation - prevent sorting for single spanned items

df8ee11

optimisation - add cross dimension change check in contributionsChanged

59115b2

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

intergalacticspacehighway added 4 commits December 11, 2025 05:13

add comments from spec

28573da

fix flexible intrinsic space distribution and optimise item containin…

b796469

…g block calculation

fix: auto margin should absorb only positive space

b85c1b9

optimise: use row map based occupancy grid

9d1d1ae

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

intergalacticspacehighway added 3 commits February 17, 2026 18:18

use glob and remove duplicate testcases

578d607

merge main

6285671

fix lint

de3871c

+// 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;

Comments

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!

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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

intergalacticspacehighway commented Nov 17, 2025 •

edited

Loading

intergalacticspacehighway Feb 17, 2026 •

edited

Loading

vercel bot commented Feb 18, 2026 •

edited

Loading

NickGerleman commented Feb 21, 2026 •

edited

Loading