CSS Grid 2/9: Grid layout algorithm by intergalacticspacehighway · Pull Request #1894 · react/yoga

intergalacticspacehighway · 2026-02-25T21:31:00Z

Summary

Core grid layout computation and dispatch integration
Includes AutoPlacement.h, GridLayout.h/cpp, TrackSizing.h
CalculateLayout.cpp grid dispatch, CMakeLists.txt updates

Split from #1865. Depends on #1893. Merge after 1/9.

vercel · 2026-02-25T21:31:05Z

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

Project	Deployment	Actions	Updated (UTC)
yoga-website	Ready	Preview, Comment	Mar 5, 2026 6:58pm

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

NickGerleman

Been looking through this, for about an hour.

I think we still need to chunk this change into steps, of smaller concerns, to be able to give it a real review (vs trivial nits) which I feel like I ought to do, if we want to maintain this long term. It's been tricky for me to understand how everything connects. That might be an indication, it's worth documenting some of the newly added structures, if what they're doing isn't intuitive.

Could we build this up, in small parts of spec/behavior/structures at a time?

NickGerleman · 2026-03-24T02:43:44Z

+
+namespace facebook::yoga {
+
+struct GridTrack : GridTrackSize {


This organization is confusing to me. Why should style input, and calculations about it, have to be same/inherited object? We have two GridTrack.h, where the most public one is for GridTrackSize (maybe that should be GridTrackSize.h?).

NickGerleman · 2026-03-24T02:54:11Z

+
+namespace facebook::yoga {
+
+struct TrackSizing {


Keeping all this logic, in a single header, in a nested struct, without header explaining purpose of structure, is pretty hard for me to parse. Esp since everything is public. Is this to try to encapsulate since header only?

I think bc header only, we would also be needing to mark things as constexpr or inline.

NickGerleman · 2026-03-24T02:55:19Z

+    float containingBlockHeight;
+  };
+
+  using CrossDimensionEstimator = std::function<float(const GridItem&)>;


nit: we should avoid using std::function unnecessarily, compared to underlying functor type. It introduces overhead like heap reallocating capture group.

NickGerleman · 2026-03-24T03:03:02Z

+namespace facebook::yoga {
+
+struct OccupancyGrid {
+  std::unordered_map<int32_t, std::vector<std::pair<int32_t, int32_t>>>


std::unordered_map is quite expensive, heap allocating a node per inserted item. How many items is this usually be? Would it be better as a flat vector of items/binary searched vector? (sidenote, this is what std::flat_map is kinda meant to solve).

intergalacticspacehighway · 2026-03-24T13:16:30Z

Could we build this up, in small parts of spec/behavior/structures at a time?

Sure @NickGerleman. yeah i thought this might be needed 😅. Will split it and also address above mentioned points in them.

intergalacticspacehighway · 2026-07-06T17:21:10Z

@rozele I will split this PR further into chunks. Thanks for importing 1/N.

Summary: Pull Request resolved: react#57459 First in a series of PRs splitting the grid layout algorithm into reviewable chunks. Addresses feedback from react/yoga#1894. ## Summary - Rename `style/GridTrack.h` to `style/GridTrackSize.h` to match the type it defines and CSS grid naming spec. - Remove layout state fields (`baseSize`, `growthLimit`, `infinitelyGrowable`) from `GridTrackSize` — these belong in the algorithm layer, not the style definition - Add `algorithm/grid/GridTrack.h`, wraps `GridTrackSize` with layout state via composition (removed inheritance) - Add `algorithm/grid/GridItem.h`, represents a grid item with its resolved position (after autoplacement algorithm) and flags used during track sizing algorithm X-link: react/yoga#1923 Differential Revision: D110780559 Pulled By: rozele

Summary: Pull Request resolved: react#57532 Implements the CSS Grid auto placement algorithm ([§8.5](https://www.w3.org/TR/css-grid-1/#auto-placement-algo)). ## How? - **AutoPlacement** — the four-step placement algorithm. - **LinePlacement** — grid-line resolution ([§8.3](https://www.w3.org/TR/css-grid-1/#grid-placement-errors)), including invalid-input handling: `line 0` is treated as `auto`, and `span 0` / negative spans clamp to `1`. - **OccupancyGrid** — overlap tracking for placed items. - Unit tests (line resolution), algorithm tests, and regression tests for the invalid-input cases. ## Not yet implemented These will be introduced later. Default `grid-auto-flow` is `row` so it won't be an issue. - **Dense packing** (`grid-auto-flow: dense`) - **Column flow** (`grid-auto-flow: column`) ## Notes - Stacked on react/yoga#1923 (data structures); until that lands this diff also shows its `GridItem.h` / `GridTrack.h` — those belong to react/yoga#1923. cc - rozele This a small chunk from react/yoga#1894 PR. X-link: react/yoga#1994 Differential Revision: D111722622 Pulled By: rozele

Summary: Pull Request resolved: react#57459 First in a series of PRs splitting the grid layout algorithm into reviewable chunks. Addresses feedback from react/yoga#1894. ## Summary - Rename `style/GridTrack.h` to `style/GridTrackSize.h` to match the type it defines and CSS grid naming spec. - Remove layout state fields (`baseSize`, `growthLimit`, `infinitelyGrowable`) from `GridTrackSize` — these belong in the algorithm layer, not the style definition - Add `algorithm/grid/GridTrack.h`, wraps `GridTrackSize` with layout state via composition (removed inheritance) - Add `algorithm/grid/GridItem.h`, represents a grid item with its resolved position (after autoplacement algorithm) and flags used during track sizing algorithm X-link: react/yoga#1923 Differential Revision: D110780559 Pulled By: rozele

Summary: Pull Request resolved: react#57532 Implements the CSS Grid auto placement algorithm ([§8.5](https://www.w3.org/TR/css-grid-1/#auto-placement-algo)). ## How? - **AutoPlacement** — the four-step placement algorithm. - **LinePlacement** — grid-line resolution ([§8.3](https://www.w3.org/TR/css-grid-1/#grid-placement-errors)), including invalid-input handling: `line 0` is treated as `auto`, and `span 0` / negative spans clamp to `1`. - **OccupancyGrid** — overlap tracking for placed items. - Unit tests (line resolution), algorithm tests, and regression tests for the invalid-input cases. ## Not yet implemented These will be introduced later. Default `grid-auto-flow` is `row` so it won't be an issue. - **Dense packing** (`grid-auto-flow: dense`) - **Column flow** (`grid-auto-flow: column`) ## Notes - Stacked on react/yoga#1923 (data structures); until that lands this diff also shows its `GridItem.h` / `GridTrack.h` — those belong to react/yoga#1923. cc - rozele This a small chunk from react/yoga#1894 PR. X-link: react/yoga#1994 Differential Revision: D111722622 Pulled By: rozele

Summary: Pull Request resolved: react#57459 First in a series of PRs splitting the grid layout algorithm into reviewable chunks. Addresses feedback from react/yoga#1894. ## Summary - Rename `style/GridTrack.h` to `style/GridTrackSize.h` to match the type it defines and CSS grid naming spec. - Remove layout state fields (`baseSize`, `growthLimit`, `infinitelyGrowable`) from `GridTrackSize` — these belong in the algorithm layer, not the style definition - Add `algorithm/grid/GridTrack.h`, wraps `GridTrackSize` with layout state via composition (removed inheritance) - Add `algorithm/grid/GridItem.h`, represents a grid item with its resolved position (after autoplacement algorithm) and flags used during track sizing algorithm X-link: react/yoga#1923 Differential Revision: D110780559 Pulled By: rozele

Summary: Pull Request resolved: react#57532 Implements the CSS Grid auto placement algorithm ([§8.5](https://www.w3.org/TR/css-grid-1/#auto-placement-algo)). ## How? - **AutoPlacement** — the four-step placement algorithm. - **LinePlacement** — grid-line resolution ([§8.3](https://www.w3.org/TR/css-grid-1/#grid-placement-errors)), including invalid-input handling: `line 0` is treated as `auto`, and `span 0` / negative spans clamp to `1`. - **OccupancyGrid** — overlap tracking for placed items. - Unit tests (line resolution), algorithm tests, and regression tests for the invalid-input cases. ## Not yet implemented These will be introduced later. Default `grid-auto-flow` is `row` so it won't be an issue. - **Dense packing** (`grid-auto-flow: dense`) - **Column flow** (`grid-auto-flow: column`) ## Notes - Stacked on react/yoga#1923 (data structures); until that lands this diff also shows its `GridItem.h` / `GridTrack.h` — those belong to react/yoga#1923. cc - rozele This a small chunk from react/yoga#1894 PR. X-link: react/yoga#1994 Differential Revision: D111722622 Pulled By: rozele

…pstream) Grid lanes (css-grid-3) is defined on top of Grid's track sizing algorithm: it imports <track-size>, minmax(), fr, repeat(), auto-fill/auto-fit and line placement from css-grid-2 by name. That algorithm does not exist in our tree — PR 1/9 of the upstream series landed the style types (GridTrackSize, GridLine, gridTemplateColumns/Rows) but not the algorithm behind them. Rather than write a second one-axis track sizer, vendor the upstream implementation verbatim: react/yoga#1894 "CSS Grid 2/9: Grid layout algorithm" by Nishan Bende (intergalacticspacehighway), open since 2026-02-25 algorithm/grid/AutoPlacement.h css-grid-1 §8.5 auto-placement algorithm/grid/GridLayout.{h,cpp} entry point, implicit tracks algorithm/grid/GridTrack.h per-track layout state algorithm/grid/TrackSizing.h css-grid-2 §12 track sizing TrackSizing is parameterized by Dimension — it runs per axis — which is exactly the shape grid lanes needs, since lanes sizes tracks in the grid axis only and flows content in the other. Not our code: nothing in algorithm/grid/ is modified, so that directory can be deleted wholesale and replaced when the upstream series lands instead of being merged. Only the integration points are ours, and only because the PR could not supply them — our CalculateLayout.cpp has diverged (block formatting contexts) and our Yoga is 197 commits behind: - CalculateLayout.cpp: the Display::Grid dispatch, next to Display::Block - yoga/CMakeLists.txt: an explicit algorithm/grid/*.cpp glob, since CMake's ** matches one level; Android builds through this same file and iOS globs recursively via the podspec The PR's YGNodeStyle.cpp hunk is deliberately omitted: it adds a fallback return to silence GCC -Wreturn-type, and our tree already handles those switches better with fatalWithMessage("Unknown YGGridTrackType"). Verified, not assumed: verify-grid-vendor.sh builds yogacore with the vendored directory and lays out display: grid; width: 600px; gap: 10px; grid-template-columns: 100px 1fr 2fr; grid-template-rows: 50px auto; comparing every coordinate against the same CSS rendered by real Safari (grid-vendor-verify.html, read via safaridriver). 25/25 values match exactly, including fr distribution (160/320 of 480 remaining) and the auto row resolving to its tallest item. Upstream status: react#1894 is being re-split after review — react#1923 (data structures) and react#1994 (auto-placement) are open, but the track-sizing split has not been posted, which is why this vendors the original PR. See algorithm/grid/README-VENDORED.md. Co-authored-by: ide <379606+ide@users.noreply.github.com>

…pstream) Grid lanes (css-grid-3) is defined on top of Grid's track sizing algorithm: it imports <track-size>, minmax(), fr, repeat(), auto-fill/auto-fit and line placement from css-grid-2 by name. That algorithm does not exist in our tree — PR 1/9 of the upstream series landed the style types (GridTrackSize, GridLine, gridTemplateColumns/Rows) but not the algorithm behind them. Rather than write a second one-axis track sizer, vendor the upstream implementation verbatim: react/yoga#1894 "CSS Grid 2/9: Grid layout algorithm" by Nishan Bende (intergalacticspacehighway), open since 2026-02-25 algorithm/grid/AutoPlacement.h css-grid-1 §8.5 auto-placement algorithm/grid/GridLayout.{h,cpp} entry point, implicit tracks algorithm/grid/GridTrack.h per-track layout state algorithm/grid/TrackSizing.h css-grid-2 §12 track sizing TrackSizing is parameterized by Dimension — it runs per axis — which is exactly the shape grid lanes needs, since lanes sizes tracks in the grid axis only and flows content in the other. Not our code: nothing in algorithm/grid/ is modified, so that directory can be deleted wholesale and replaced when the upstream series lands instead of being merged. Only the integration points are ours, and only because the PR could not supply them — our CalculateLayout.cpp has diverged (block formatting contexts) and our Yoga is 197 commits behind: - CalculateLayout.cpp: the Display::Grid dispatch, next to Display::Block - yoga/CMakeLists.txt: an explicit algorithm/grid/*.cpp glob, since CMake's ** matches one level; Android builds through this same file and iOS globs recursively via the podspec The PR's YGNodeStyle.cpp hunk is deliberately omitted: it adds a fallback return to silence GCC -Wreturn-type, and our tree already handles those switches better with fatalWithMessage("Unknown YGGridTrackType"). Verified, not assumed: verify-grid-vendor.sh builds yogacore with the vendored directory and lays out display: grid; width: 600px; gap: 10px; grid-template-columns: 100px 1fr 2fr; grid-template-rows: 50px auto; comparing every coordinate against the same CSS rendered by real Safari (grid-vendor-verify.html, read via safaridriver). 25/25 values match exactly, including fr distribution (160/320 of 480 remaining) and the auto row resolving to its tallest item. Upstream status: react#1894 is being re-split after review — react#1923 (data structures) and react#1994 (auto-placement) are open, but the track-sizing split has not been posted, which is why this vendors the original PR. See algorithm/grid/README-VENDORED.md. Co-authored-by: ide <379606+ide@users.noreply.github.com> (cherry picked from commit 08d6986)

…pstream) Grid lanes (css-grid-3) is defined on top of Grid's track sizing algorithm: it imports <track-size>, minmax(), fr, repeat(), auto-fill/auto-fit and line placement from css-grid-2 by name. That algorithm does not exist in our tree — PR 1/9 of the upstream series landed the style types (GridTrackSize, GridLine, gridTemplateColumns/Rows) but not the algorithm behind them. Rather than write a second one-axis track sizer, vendor the upstream implementation verbatim: react/yoga#1894 "CSS Grid 2/9: Grid layout algorithm" by Nishan Bende (intergalacticspacehighway), open since 2026-02-25 algorithm/grid/AutoPlacement.h css-grid-1 §8.5 auto-placement algorithm/grid/GridLayout.{h,cpp} entry point, implicit tracks algorithm/grid/GridTrack.h per-track layout state algorithm/grid/TrackSizing.h css-grid-2 §12 track sizing TrackSizing is parameterized by Dimension — it runs per axis — which is exactly the shape grid lanes needs, since lanes sizes tracks in the grid axis only and flows content in the other. Not our code: nothing in algorithm/grid/ is modified, so that directory can be deleted wholesale and replaced when the upstream series lands instead of being merged. Only the integration points are ours, and only because the PR could not supply them — our CalculateLayout.cpp has diverged (block formatting contexts) and our Yoga is 197 commits behind: - CalculateLayout.cpp: the Display::Grid dispatch, next to Display::Block - yoga/CMakeLists.txt: an explicit algorithm/grid/*.cpp glob, since CMake's ** matches one level; Android builds through this same file and iOS globs recursively via the podspec The PR's YGNodeStyle.cpp hunk is deliberately omitted: it adds a fallback return to silence GCC -Wreturn-type, and our tree already handles those switches better with fatalWithMessage("Unknown YGGridTrackType"). Verified, not assumed: verify-grid-vendor.sh builds yogacore with the vendored directory and lays out display: grid; width: 600px; gap: 10px; grid-template-columns: 100px 1fr 2fr; grid-template-rows: 50px auto; comparing every coordinate against the same CSS rendered by real Safari (grid-vendor-verify.html, read via safaridriver). 25/25 values match exactly, including fr distribution (160/320 of 480 remaining) and the auto row resolving to its tallest item. Upstream status: react#1894 is being re-split after review — react#1923 (data structures) and react#1994 (auto-placement) are open, but the track-sizing split has not been posted, which is why this vendors the original PR. See algorithm/grid/README-VENDORED.md. A third local fix, listed in README-VENDORED.md: the fit-content clamp in the inline axis was never applied, so a grid measured under a fit-content width reported its max-content width. It is now min(max-content, max(min-content, available)), its tracks sized again at the available width when the max-content exceeds it. Co-authored-by: ide <379606+ide@users.noreply.github.com>

…pstream) Grid lanes (css-grid-3) is defined on top of Grid's track sizing algorithm: it imports <track-size>, minmax(), fr, repeat(), auto-fill/auto-fit and line placement from css-grid-2 by name. That algorithm does not exist in our tree — PR 1/9 of the upstream series landed the style types (GridTrackSize, GridLine, gridTemplateColumns/Rows) but not the algorithm behind them. Rather than write a second one-axis track sizer, vendor the upstream implementation verbatim: react/yoga#1894 "CSS Grid 2/9: Grid layout algorithm" by Nishan Bende (intergalacticspacehighway), open since 2026-02-25 algorithm/grid/AutoPlacement.h css-grid-1 §8.5 auto-placement algorithm/grid/GridLayout.{h,cpp} entry point, implicit tracks algorithm/grid/GridTrack.h per-track layout state algorithm/grid/TrackSizing.h css-grid-2 §12 track sizing TrackSizing is parameterized by Dimension — it runs per axis — which is exactly the shape grid lanes needs, since lanes sizes tracks in the grid axis only and flows content in the other. Not our code: nothing in algorithm/grid/ is modified, so that directory can be deleted wholesale and replaced when the upstream series lands instead of being merged. Only the integration points are ours, and only because the PR could not supply them — our CalculateLayout.cpp has diverged (block formatting contexts) and our Yoga is 197 commits behind: - CalculateLayout.cpp: the Display::Grid dispatch, next to Display::Block - yoga/CMakeLists.txt: an explicit algorithm/grid/*.cpp glob, since CMake's ** matches one level; Android builds through this same file and iOS globs recursively via the podspec The PR's YGNodeStyle.cpp hunk is deliberately omitted: it adds a fallback return to silence GCC -Wreturn-type, and our tree already handles those switches better with fatalWithMessage("Unknown YGGridTrackType"). Verified, not assumed: verify-grid-vendor.sh builds yogacore with the vendored directory and lays out display: grid; width: 600px; gap: 10px; grid-template-columns: 100px 1fr 2fr; grid-template-rows: 50px auto; comparing every coordinate against the same CSS rendered by real Safari (grid-vendor-verify.html, read via safaridriver). 25/25 values match exactly, including fr distribution (160/320 of 480 remaining) and the auto row resolving to its tallest item. Upstream status: react#1894 is being re-split after review — react#1923 (data structures) and react#1994 (auto-placement) are open, but the track-sizing split has not been posted, which is why this vendors the original PR. See algorithm/grid/README-VENDORED.md. A third local fix, listed in README-VENDORED.md: the fit-content clamp in the inline axis was never applied, so a grid measured under a fit-content width reported its max-content width. It is now min(max-content, max(min-content, available)), its tracks sized again at the available width when the max-content exceeds it. A fourth: three steps of the track sizing gave an `auto` minimum an item's limited min-content contribution whenever Yoga's sizing mode was `MaxContent`, which is also how Yoga lays out an `auto` block size; that size is indefinite free space, not a max-content constraint, so a `0fr` row over an item with `min-height: 0` (the accordion idiom) stood as tall as the item's content. Only the inline axis is measured under a real max-content constraint now. `GridZeroFrRow-itest.js` pins it. Co-authored-by: ide <379606+ide@users.noreply.github.com>

meta-cla Bot added the CLA Signed label Feb 25, 2026

intergalacticspacehighway mentioned this pull request Feb 25, 2026

CSS Grid 3/9: Grid benchmark #1895

Open

vercel Bot deployed to Preview February 25, 2026 21:33

View deployment

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 Feb 25, 2026

dannote mentioned this pull request Mar 2, 2026

CSS Grid layout support open-pencil/open-pencil#7

Closed

intergalacticspacehighway force-pushed the css-grid-2-algorithm branch from 76d64ff to 083f895 Compare March 5, 2026 13:04

vercel Bot deployed to Preview March 5, 2026 13:07

View deployment

separate grid track layout state from style definition

53e0927

vercel Bot deployed to Preview March 5, 2026 13:28

View deployment

merge main

dbb7f1e

vercel Bot deployed to Preview March 5, 2026 18:58

View deployment

NickGerleman reviewed Mar 24, 2026

View reviewed changes

intergalacticspacehighway mentioned this pull request Mar 27, 2026

CSS Grid algorithm 1/N: data structures #1923

Open

rozele mentioned this pull request Jul 7, 2026

CSS Grid algorithm 1/N: data structures (#57459) react/react-native#57459

Open

intergalacticspacehighway mentioned this pull request Jul 11, 2026

CSS Grid algorithm 2/N: auto-placement #1994

Open

rozele mentioned this pull request Jul 13, 2026

CSS Grid algorithm 2/N: auto-placement (#57532) react/react-native#57532

Open

Navigation Menu

Repository navigation

CSS Grid 2/9: Grid layout algorithm - #1894

CSS Grid 2/9: Grid layout algorithm#1894
intergalacticspacehighway wants to merge 3 commits into
react:mainfrom
intergalacticspacehighway:css-grid-2-algorithm

intergalacticspacehighway commented Feb 25, 2026

Uh oh!

vercel Bot commented Feb 25, 2026 •

edited

Loading

Uh oh!

NickGerleman left a comment

Uh oh!

NickGerleman Mar 24, 2026

Uh oh!

NickGerleman Mar 24, 2026

Uh oh!

NickGerleman Mar 24, 2026

Uh oh!

NickGerleman Mar 24, 2026

Uh oh!

intergalacticspacehighway commented Mar 24, 2026

Uh oh!

intergalacticspacehighway commented Jul 6, 2026

Uh oh!

This branch was successfully deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants


		namespace facebook::yoga {

		struct GridTrack : GridTrackSize {

Conversation

intergalacticspacehighway commented Feb 25, 2026

Summary

Uh oh!

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

Uh oh!

Uh oh!

NickGerleman left a comment

Choose a reason for hiding this comment

Uh oh!

NickGerleman Mar 24, 2026

Choose a reason for hiding this comment

Uh oh!

NickGerleman Mar 24, 2026

Choose a reason for hiding this comment

Uh oh!

NickGerleman Mar 24, 2026

Choose a reason for hiding this comment

Uh oh!

NickGerleman Mar 24, 2026

Choose a reason for hiding this comment

Uh oh!

intergalacticspacehighway commented Mar 24, 2026

Uh oh!

intergalacticspacehighway commented Jul 6, 2026

Uh oh!

This branch was successfully deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

vercel Bot commented Feb 25, 2026 •

edited

Loading