CSS Grid 1/9: Grid style types and public API by intergalacticspacehighway · Pull Request #1893 · facebook/yoga

intergalacticspacehighway · 2026-02-25T21:29:50Z

Summary

Add foundational data types, enums, style properties, and C API for expressing CSS Grid layouts
Includes GridLine.h, GridTrack.h, GridTrackType.h, Display::Grid, new alignment enums (Align::Start/End, Justify::Auto/Stretch/Start/End)
C API: YGGridTrackList.h/cpp, YGNodeStyle grid setters/getters
Layout helper updates, Node.h relativePosition made public

Split from #1865. Part of the CSS Grid implementation series.

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

vercel · 2026-02-25T21:29:55Z

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

Project	Deployment	Actions	Updated (UTC)
yoga-website	Ready	Preview, Comment	Feb 28, 2026 9:14am

NickGerleman · 2026-02-27T21:49:47Z

+/**
+ * Set the grid-template-rows property on a node.
+ */
+YG_EXPORT void YGNodeStyleSetGridTemplateRows(
+    YGNodeRef node,
+    YGGridTrackListRef trackList);
+
+/**
+ * Set the grid-template-columns property on a node.
+ */
+YG_EXPORT void YGNodeStyleSetGridTemplateColumns(
+    YGNodeRef node,
+    YGGridTrackListRef trackList);
+
+/**
+ * Set the grid-auto-rows property on a node.
+ */
+YG_EXPORT void YGNodeStyleSetGridAutoRows(
+    YGNodeRef node,
+    YGGridTrackListRef trackList);
+
+/**
+ * Set the grid-auto-columns property on a node.
+ */
+YG_EXPORT void YGNodeStyleSetGridAutoColumns(
+    YGNodeRef node,
+    YGGridTrackListRef trackList);
+


These should probably go in YGNodeStyle.h

NickGerleman · 2026-02-27T21:55:48Z

+
+// Internal representation of a grid track value
+struct YGGridTrackValue {
+  enum class Type { Points, Percent, Fr, Auto, MinMax };


What does Auto mean here?

It's one of the track sizes https://www.w3.org/TR/css-grid-1/#track-sizes. e.g. grid-template-columns: "auto 100px 1fr"

NickGerleman · 2026-02-27T21:58:57Z

+ */
+YG_EXPORT void YGNodeStyleSetGridTemplateRows(
+    YGNodeRef node,
+    YGGridTrackListRef trackList);


It's not clear from me in this API, who takes ownership of the TrackList? Does the Yoga node free it at some point, or must the user?

User would need to free it.

auto gridTemplateColumns = YGGridTrackListCreate(); YGGridTrackListAddTrack(gridTemplateColumns, YGPoints(40)); YGGridTrackListAddTrack(gridTemplateColumns, YGPoints(40)); // free gridTemplateColumns YGGridTrackListFree(gridTemplateColumns);

it was inspired from YGConfigNew and YGNodeNewWithConfig implementation. Maybe YGGridTrackListCreate could be renamed to YGGridTrackListNew?

NickGerleman · 2026-02-27T22:01:46Z

+      delete minValue;
+      delete maxValue;


Can we use RAII-style handles where we can get away with it for internals?

NickGerleman · 2026-02-27T22:03:21Z

+    for (auto* track : tracks) {
+      delete track;
+    }


See other comment about RAII. If we want the list to have assumed ownership, would be best to represent internally as unique_ptr, so move checking can catch any issues.

NickGerleman · 2026-02-27T22:06:37Z

+  }
+};
+
+// Internal representation of a grid track list


Is this comment accurate?

From what I could tell, internally, we use std::vector<GridTrack>, and this type is more for the public API, before internal version?

Yes, it's inaccurate, removed.

NickGerleman · 2026-02-27T22:08:37Z

+/**
+ * Create a grid track value with a points (px) length.
+ */
+YG_EXPORT YGGridTrackValueRef YGPoints(float points);
+
+/**
+ * Create a grid track value with a percentage length.
+ */
+YG_EXPORT YGGridTrackValueRef YGPercent(float percent);
+
+/**
+ * Create a grid track value with a flexible (fr) length.
+ */
+YG_EXPORT YGGridTrackValueRef YGFr(float fr);
+
+/**
+ * Create a grid track value with auto sizing.
+ */
+YG_EXPORT YGGridTrackValueRef YGAuto(void);


Since these aren't namespaced, it means that we would have global YGPoints, etc, which is grid specific. If Grid specific units, would be better to include in API naming.

Updated, will also handle it in gentest-cpp.js

NickGerleman · 2026-02-28T00:38:54Z

+  YGGridTrackList(YGGridTrackList&&) = delete;
+  YGGridTrackList& operator=(YGGridTrackList&&) = delete;
+
+  GridTrackList toGridTrackList() const {


Trying to think if there is a way to avoid doing the extra allocations for setting style, vs internal.

Can the operations to add track size to the style on a Node, add directly to underlying yoga::style vector, instead of exposing heap allocated list as the primitive? Or do you think exposing it will be helpful, e.g. for RN integration?

Revisited it here. I added this API when testing gentest fixtures but didn't revisit later 😅. New changes does not require manual free or extra allocation and directly updates internal vector.

YGNodeStyleSetGridTemplateColumnsCount(node, 3); YGNodeStyleSetGridTemplateColumn(node, 0, YGGridTrackTypePoints, 40); YGNodeStyleSetGridTemplateColumn(node, 1, YGGridTrackTypePercent, 20); YGNodeStyleSetGridTemplateColumnMinMax(minmax, 2, YGGridTrackTypePoints, 20, YGGridTrackTypePoints, 40);

NickGerleman · 2026-02-28T00:42:16Z

+}
+
+void YGGridTrackListFree(YGGridTrackListRef list) {
+  delete list;


Subtle bug here, we don't have concrete type of what we are deleting, beyond the marker interface, and would not call destructors.

Suggested change

delete list;

delete static_cast<YGGridTrackList*>(list);

In other places, we provide overload of resolveRef to convert from C ABI type, to concrete C++ internal type, but it's just a convenience for the static_cast in less characters.

Thanks. Just removed this API in the new changes 😅

NickGerleman · 2026-02-28T00:43:29Z

+  bool operator==(const GridLine& other) const {
+    return type == other.type && integer == other.integer;
+  }
+
+  bool operator!=(const GridLine& other) const {
+    return !(*this == other);
+  }


This will generate everything needed.

Suggested change

bool operator==(const GridLine& other) const {

return type == other.type && integer == other.integer;

}

bool operator!=(const GridLine& other) const {

return !(*this == other);

}

bool operator==(const GridLine& other) const = default;

NickGerleman · 2026-02-28T00:44:17Z

+  // Line position (1, 2, -1, -2, etc)
+  int32_t integer;
+
+  static GridLine auto_() {


nit: I think all of these can be constexpr

NickGerleman · 2026-02-28T00:45:01Z

+  bool operator==(const GridTrackSize& other) const {
+    return minSizingFunction == other.minSizingFunction &&
+        maxSizingFunction == other.maxSizingFunction;
+  }
+
+  bool operator!=(const GridTrackSize& other) const {
+    return !(*this == other);
+  }


Suggested change

bool operator==(const GridTrackSize& other) const {

return minSizingFunction == other.minSizingFunction &&

maxSizingFunction == other.maxSizingFunction;

}

bool operator!=(const GridTrackSize& other) const {

return !(*this == other);

}

bool operator==(const GridTrackSize& other) const = default;

NickGerleman · 2026-02-28T00:46:03Z

+  bool infinitelyGrowable = false;
+
+  // Static factory methods for common cases
+  static GridTrackSize auto_() {


I think the reserved keyword is how we ended up with ofAuto in a lot of places 😅

NickGerleman · 2026-02-28T00:48:41Z

+  // These are used in the grid layout algorithm when distributing spaces among
+  // tracks
+  // TODO: maybe move them to TrackSizing since these are track states
+  float baseSize = 0.0f;
+  float growthLimit = 0.0f;
+  bool infinitelyGrowable = false;


If GridTrack is on the yoga::Style, we definitely want to avoid keep layout state on it.

Yes, I have a version without it. Can i do it in the algorithm PR when we merge this one?

…cating new list

NickGerleman · 2026-02-28T09:07:38Z

    YGNodeRef node,
-    YGGridTrackListRef trackList);
-YG_EXPORT void YGNodeStyleSetGridTemplateColumns(
+    uint32_t count);


The rest of the public API exposes size_t for indices

meta-codesync · 2026-03-02T07:04:11Z

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

Summary: - Add foundational data types, enums, style properties, and C API for expressing CSS Grid layouts - Includes `GridLine.h`, `GridTrack.h`, `GridTrackType.h`, `Display::Grid`, new alignment enums (`Align::Start/End`, `Justify::Auto/Stretch/Start/End`) - C API: `YGGridTrackList.h/cpp`, `YGNodeStyle` grid setters/getters - Layout helper updates, `Node.h` `relativePosition` made public Split from facebook/yoga#1865. Part of the CSS Grid implementation series. X-link: facebook/yoga#1893 Differential Revision: D94867121 Pulled By: NickGerleman

meta-codesync · 2026-03-05T12:14:17Z

@NickGerleman merged this pull request in 0752485.

Summary: Pull Request resolved: #55876 - Add foundational data types, enums, style properties, and C API for expressing CSS Grid layouts - Includes `GridLine.h`, `GridTrack.h`, `GridTrackType.h`, `Display::Grid`, new alignment enums (`Align::Start/End`, `Justify::Auto/Stretch/Start/End`) - C API: `YGGridTrackList.h/cpp`, `YGNodeStyle` grid setters/getters - Layout helper updates, `Node.h` `relativePosition` made public Split from facebook/yoga#1865. Part of the CSS Grid implementation series. Changelog: [Internal] X-link: facebook/yoga#1893 Reviewed By: sammy-SC Differential Revision: D94867121 Pulled By: NickGerleman fbshipit-source-id: adcb6d107cdd782550a614f87f84cff3ecefd806

Summary: Pull Request resolved: facebook#55876 - Add foundational data types, enums, style properties, and C API for expressing CSS Grid layouts - Includes `GridLine.h`, `GridTrack.h`, `GridTrackType.h`, `Display::Grid`, new alignment enums (`Align::Start/End`, `Justify::Auto/Stretch/Start/End`) - C API: `YGGridTrackList.h/cpp`, `YGNodeStyle` grid setters/getters - Layout helper updates, `Node.h` `relativePosition` made public Split from facebook/yoga#1865. Part of the CSS Grid implementation series. Changelog: [Internal] X-link: facebook/yoga#1893 Reviewed By: sammy-SC Differential Revision: D94867121 Pulled By: NickGerleman fbshipit-source-id: adcb6d107cdd782550a614f87f84cff3ecefd806

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

intergalacticspacehighway mentioned this pull request Feb 25, 2026

CSS Grid 2/9: Grid layout algorithm #1894

Open

vercel Bot deployed to Preview February 25, 2026 21:32 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

NickGerleman reviewed Feb 27, 2026

View reviewed changes

pr feedback

a1fb9c5

vercel Bot deployed to Preview February 27, 2026 23:35 View deployment

intergalacticspacehighway requested a review from NickGerleman February 27, 2026 23:41

NickGerleman reviewed Feb 28, 2026

View reviewed changes

refactor grid track public api to use internal vector instead of allo…

e614f12

…cating new list

intergalacticspacehighway force-pushed the css-grid-1-api branch from 5a92823 to e614f12 Compare February 28, 2026 08:38

vercel Bot deployed to Preview February 28, 2026 08:41 View deployment

NickGerleman reviewed Feb 28, 2026

View reviewed changes

use size_t in public track apis

c457221

vercel Bot deployed to Preview February 28, 2026 09:14 View deployment

dannote mentioned this pull request Mar 2, 2026

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

Closed

NickGerleman mentioned this pull request Mar 3, 2026

CSS Grid 1/9: Grid style types and public API facebook/react-native#55876

Closed

meta-codesync Bot closed this in 0752485 Mar 5, 2026

facebook-github-bot added the Merged label Mar 5, 2026

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!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

NickGerleman Feb 28, 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!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

meta-codesync Bot commented Mar 2, 2026

Uh oh!

meta-codesync Bot commented Mar 5, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

vercel Bot commented Feb 25, 2026 •

edited

Loading

NickGerleman Feb 28, 2026 •

edited

Loading