vendor: CSS Grid layout algorithm from Yoga PR react#1894 (unlanded upstream)

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>

Author: 2 people

grid-vendor-verify.cpp

@@ -0,0 +1,87 @@
+// Smoke test for the vendored CSS Grid algorithm (Yoga PR #1894), pinned
+// against real Safari for the identical layout (see /tmp/gl/grid.html).
+//
+//   display: grid; width: 600px; gap: 10px;
+//   grid-template-columns: 100px 1fr 2fr;
+//   grid-template-rows: 50px auto;
+//   six children with fixed heights 20/30/25/40/15/35
+#include <yoga/Yoga.h>
+#include <cstdio>
+#include <cstdlib>
+
+struct Expected {
+  const char* name;
+  float x, y, w, h;
+};
+
+// Ground truth read out of Safari 26 via safaridriver.
+static const Expected kSafari[] = {
+    {"a", 0.0f, 0.0f, 100.0f, 20.0f},
+    {"b", 110.0f, 0.0f, 160.0f, 30.0f},
+    {"c", 280.0f, 0.0f, 320.0f, 25.0f},
+    {"d", 0.0f, 60.0f, 100.0f, 40.0f},
+    {"e", 110.0f, 60.0f, 160.0f, 15.0f},
+    {"f", 280.0f, 60.0f, 320.0f, 35.0f},
+};
+static const float kSafariContainerHeight = 100.0f;
+
+int main() {
+  const float heights[] = {20.0f, 30.0f, 25.0f, 40.0f, 15.0f, 35.0f};
+
+  YGNodeRef root = YGNodeNew();
+  YGNodeStyleSetDisplay(root, YGDisplayGrid);
+  YGNodeStyleSetWidth(root, 600.0f);
+  YGNodeStyleSetGap(root, YGGutterAll, 10.0f);
+
+  YGNodeStyleSetGridTemplateColumnsCount(root, 3);
+  YGNodeStyleSetGridTemplateColumn(root, 0, YGGridTrackTypePoints, 100.0f);
+  YGNodeStyleSetGridTemplateColumn(root, 1, YGGridTrackTypeFr, 1.0f);
+  YGNodeStyleSetGridTemplateColumn(root, 2, YGGridTrackTypeFr, 2.0f);
+
+  YGNodeStyleSetGridTemplateRowsCount(root, 2);
+  YGNodeStyleSetGridTemplateRow(root, 0, YGGridTrackTypePoints, 50.0f);
+  YGNodeStyleSetGridTemplateRow(root, 1, YGGridTrackTypeAuto, 0.0f);
+
+  for (size_t i = 0; i < 6; i++) {
+    YGNodeRef child = YGNodeNew();
+    YGNodeStyleSetHeight(child, heights[i]);
+    YGNodeInsertChild(root, child, i);
+  }
+
+  YGNodeCalculateLayout(root, YGUndefined, YGUndefined, YGDirectionLTR);
+
+  int failures = 0;
+  auto check = [&](const char* what, float actual, float expected) {
+    const bool ok = std::abs(actual - expected) < 0.01f;
+    if (!ok) {
+      failures++;
+    }
+    std::printf(
+        "  %-4s %-2s %7.2f %s %7.2f\n",
+        what,
+        ok ? "ok" : "XX",
+        actual,
+        ok ? "==" : "!=",
+        expected);
+  };
+
+  std::printf("container height:\n");
+  check("h", YGNodeLayoutGetHeight(root), kSafariContainerHeight);
+
+  for (size_t i = 0; i < 6; i++) {
+    const YGNodeRef child = YGNodeGetChild(root, i);
+    const Expected& e = kSafari[i];
+    std::printf("item %s:\n", e.name);
+    check("x", YGNodeLayoutGetLeft(child), e.x);
+    check("y", YGNodeLayoutGetTop(child), e.y);
+    check("w", YGNodeLayoutGetWidth(child), e.w);
+    check("h", YGNodeLayoutGetHeight(child), e.h);
+  }
+
+  YGNodeFreeRecursive(root);
+  std::printf(
+      "\n%s (%d mismatches vs Safari)\n",
+      failures == 0 ? "PASS" : "FAIL",
+      failures);
+  return failures == 0 ? 0 : 1;
+}

grid-vendor-verify.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html><head><meta charset="utf-8"><style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body { margin: 0; }
+  #g {
+    display: grid;
+    width: 600px;
+    grid-template-columns: 100px 1fr 2fr;
+    grid-template-rows: 50px auto;
+    gap: 10px;
+  }
+  #g > div { background: #cde; }
+</style></head>
+<body>
+<div id="g">
+  <div id="a" style="height:20px"></div>
+  <div id="b" style="height:30px"></div>
+  <div id="c" style="height:25px"></div>
+  <div id="d" style="height:40px"></div>
+  <div id="e" style="height:15px"></div>
+  <div id="f" style="height:35px"></div>
+</div>
+<script>
+window.__rects = (function () {
+  const out = {};
+  const g = document.getElementById('g');
+  const gr = g.getBoundingClientRect();
+  out.container = {w: gr.width, h: gr.height};
+  for (const id of ['a','b','c','d','e','f']) {
+    const r = document.getElementById(id).getBoundingClientRect();
+    out[id] = {x: r.left - gr.left, y: r.top - gr.top, w: r.width, h: r.height};
+  }
+  return out;
+})();
+</script>
+</body></html>

packages/react-native/Libraries/Components/View/__tests__/GridFitContentRows-itest.js

@@ -0,0 +1,105 @@
+/**
+ * @flow strict-local
+ * @format
+ * @fantom_flags enableYogaDisplayBlock:true enableStringChildren:true
+ */
+/**
+ * A grid of cards whose items are scroll containers (`overflow: hidden`),
+ * measured under a fit-content constraint — a grid inside a flex column that
+ * has an available height. The items' minimum contribution is 0 (css-grid-2
+ * §6.6: a scroll container's automatic minimum size), so the auto rows start
+ * at nothing and must grow to their items in the maximize step; a fit-content
+ * axis with no definite size grows them as max-content does. Before the fix
+ * every row stayed at 0 and the grid measured as a stack of gaps.
+ */
+
+import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment';
+
+import type {HostInstance} from 'react-native';
+
+import ensureInstance from '../../../../src/private/__tests__/utilities/ensureInstance';
+import * as Fantom from '@react-native/fantom';
+import * as React from 'react';
+import {createRef} from 'react';
+import {Text, View} from 'react-native';
+import ReactNativeElement from 'react-native/src/private/webapis/dom/nodes/ReactNativeElement';
+
+function rect(ref: {current: HostInstance | null}) {
+  return ensureInstance(
+    ref.current,
+    ReactNativeElement,
+  ).getBoundingClientRect();
+}
+
+const DESC =
+  'AppShell provides a foundational page layout with header, sidebar, and content regions. Use it to establish consistent structure across your application.';
+
+describe('grid of scroll-container cards under fit-content', () => {
+  it('sizes each row to its card', () => {
+    const gridRef = createRef<HostInstance>();
+    const cardRef = createRef<HostInstance>();
+    const contentRef = createRef<HostInstance>();
+    const root = Fantom.createRoot({viewportWidth: 402});
+    Fantom.runTask(() => {
+      root.render(
+        <View style={{flexDirection: 'column', width: 402}}>
+          <View style={{flexDirection: 'column', gap: 16}}>
+            <Text style={{fontSize: 22}}>Core</Text>
+            <View
+              ref={gridRef}
+              style={{
+                display: 'grid',
+                gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))',
+                gap: 8,
+                margin: -8,
+              }}>
+              {Array.from({length: 20}, (_, i) => (
+                <View
+                  key={i}
+                  ref={i === 0 ? cardRef : undefined}
+                  style={{
+                    display: 'block',
+                    padding: 8,
+                    overflow: 'hidden',
+                    position: 'relative',
+                    minWidth: 0,
+                  }}>
+                  <View
+                    style={{
+                      position: 'absolute',
+                      width: 1,
+                      height: 1,
+                      margin: -1,
+                      overflow: 'hidden',
+                    }}
+                  />
+                  <View
+                    ref={i === 0 ? contentRef : undefined}
+                    style={{flexDirection: 'column', gap: 12}}>
+                    <View
+                      style={{
+                        display: 'block',
+                        minHeight: 160,
+                        minWidth: 0,
+                        overflow: 'hidden',
+                      }}
+                    />
+                    <View style={{flexDirection: 'column', gap: 4}}>
+                      <Text style={{fontWeight: 'bold'}}>AppShell</Text>
+                      <Text numberOfLines={3}>{DESC}</Text>
+                    </View>
+                  </View>
+                </View>
+              ))}
+            </View>
+          </View>
+        </View>,
+      );
+    });
+    const content = rect(contentRef).height;
+    const card = rect(cardRef).height;
+    const grid = rect(gridRef).height;
+    expect(card).toBeGreaterThan(content);
+    expect(grid).toBeGreaterThan(20 * content);
+  });
+});

packages/react-native/Libraries/Components/View/__tests__/GridZeroFrRow-itest.js

@@ -0,0 +1,57 @@
+/**
+ * @flow strict-local
+ * @format
+ * @fantom_flags enableYogaDisplayBlock:true enableStringChildren:true
+ */
+/**
+ * The accordion idiom: a grid whose one row is `0fr` while closed and `1fr`
+ * while open, over an item with `overflow: hidden` and `min-height: 0`. The
+ * grid's height is `auto`, which Yoga lays out in max-content mode but which
+ * is indefinite free space rather than a max-content constraint (css-grid-2
+ * §12.5), so the closed row takes the item's minimum contribution, 0, and
+ * collapses. Before the fix it took the item's content height, and a drawer's
+ * closed sections each stood as tall as their open contents.
+ */
+
+import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment';
+
+import type {HostInstance} from 'react-native';
+
+import ensureInstance from '../../../../src/private/__tests__/utilities/ensureInstance';
+import * as Fantom from '@react-native/fantom';
+import * as React from 'react';
+import {createRef} from 'react';
+import {View} from 'react-native';
+import ReactNativeElement from 'react-native/src/private/webapis/dom/nodes/ReactNativeElement';
+
+function height(ref: {current: HostInstance | null}): number {
+  return ensureInstance(ref.current, ReactNativeElement).getBoundingClientRect()
+    .height;
+}
+
+function section(rows: string): number {
+  const gridRef = createRef<HostInstance>();
+  const root = Fantom.createRoot({viewportWidth: 300});
+  Fantom.runTask(() => {
+    root.render(
+      <View style={{width: 300}}>
+        <View ref={gridRef} style={{display: 'grid', gridTemplateRows: rows}}>
+          <View style={{overflow: 'hidden', minHeight: 0}}>
+            <View style={{height: 100}} />
+          </View>
+        </View>
+      </View>,
+    );
+  });
+  return height(gridRef);
+}
+
+describe('a single fr row over a clipping item', () => {
+  it('collapses at 0fr', () => {
+    expect(section('0fr')).toBe(0);
+  });
+
+  it('stands as tall as its item at 1fr', () => {
+    expect(section('1fr')).toBe(100);
+  });
+});

packages/react-native/ReactCommon/yoga/yoga/CMakeLists.txt

@@ -20,7 +20,8 @@ include(${YOGA_ROOT}/cmake/project-defaults.cmake)
 
 file(GLOB SOURCES CONFIGURE_DEPENDS
     ${CMAKE_CURRENT_SOURCE_DIR}/*.cpp
-    ${CMAKE_CURRENT_SOURCE_DIR}/**/*.cpp)
+    ${CMAKE_CURRENT_SOURCE_DIR}/**/*.cpp
+    ${CMAKE_CURRENT_SOURCE_DIR}/algorithm/grid/*.cpp)
 
 add_library(yogacore STATIC ${SOURCES})
 

packages/react-native/ReactCommon/yoga/yoga/algorithm/CalculateLayout.cpp

@@ -29,6 +29,7 @@
 #include <yoga/algorithm/PixelGrid.h>
 #include <yoga/algorithm/SizingMode.h>
 #include <yoga/algorithm/TrailingPosition.h>
+#include <yoga/algorithm/grid/GridLayout.h>
 #include <yoga/debug/AssertFatal.h>
 #include <yoga/debug/Log.h>
 #include <yoga/event/event.h>
@@ -2957,6 +2958,27 @@ static void calculateLayoutImpl(
   // current node as they will not be traversed
   cleanupContentsNodesRecursively(node, performLayout);
 
+  // Grid formatting context: `display: grid` uses the dedicated grid layout
+  // path rather than the flex algorithm below. VENDORED — see
+  // algorithm/grid/README-VENDORED.md.
+  if (node->style().display() == Display::Grid) {
+    calculateGridLayoutInternal(
+        node,
+        availableWidth,
+        availableHeight,
+        ownerDirection,
+        widthSizingMode,
+        heightSizingMode,
+        ownerWidth,
+        ownerHeight,
+        performLayout,
+        reason,
+        layoutMarkerData,
+        depth,
+        generationCount);
+    return;
+  }
+
   // Block formatting context: `display: block` uses a dedicated block layout
   // path rather than the flex algorithm below (text-children-plan.md §3.A/§4.5).
   if (node->style().display() == Display::Block) {