CSS Grid 1/9: Grid style types and public API (#1879)

Summary:
X-link: react/react-native#55665


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
- Website playground grid property support
- React Native mirror of all C++ changes

Differential Revision: D93946262

Author: NickGerleman

enums.py

@@ -19,12 +19,16 @@
     ],
     "FlexDirection": ["Column", "ColumnReverse", "Row", "RowReverse"],
     "Justify": [
+        "Auto",
         "FlexStart",
         "Center",
         "FlexEnd",
         "SpaceBetween",
         "SpaceAround",
         "SpaceEvenly",
+        "Stretch",
+        "Start",
+        "End",
     ],
     "Overflow": ["Visible", "Hidden", "Scroll"],
     "Align": [
@@ -37,9 +41,11 @@
         "SpaceBetween",
         "SpaceAround",
         "SpaceEvenly",
+        "Start",
+        "End",
     ],
     "PositionType": ["Static", "Relative", "Absolute"],
-    "Display": ["Flex", "None", "Contents"],
+    "Display": ["Flex", "None", "Contents", "Grid"],
     "Wrap": ["NoWrap", "Wrap", "WrapReverse"],
     "BoxSizing": ["BorderBox", "ContentBox"],
     "MeasureMode": ["Undefined", "Exactly", "AtMost"],
@@ -62,6 +68,7 @@
         "WebFlexBasis",
     ],
     "Gutter": ["Column", "Row", "All"],
+    "GridTrackType": ["Auto", "Points", "Percent", "Fr", "Minmax"],
     # Known incorrect behavior which can be enabled for compatibility
     "Errata": [
         # Default: Standards conformant mode

java/com/facebook/yoga/YogaAlign.java

@@ -18,7 +18,9 @@ public enum YogaAlign {
   BASELINE(5),
   SPACE_BETWEEN(6),
   SPACE_AROUND(7),
-  SPACE_EVENLY(8);
+  SPACE_EVENLY(8),
+  START(9),
+  END(10);
 
   private final int mIntValue;
 
@@ -41,6 +43,8 @@ public static YogaAlign fromInt(int value) {
       case 6: return SPACE_BETWEEN;
       case 7: return SPACE_AROUND;
       case 8: return SPACE_EVENLY;
+      case 9: return START;
+      case 10: return END;
       default: throw new IllegalArgumentException("Unknown enum value: " + value);
     }
   }

java/com/facebook/yoga/YogaDisplay.java

@@ -12,7 +12,8 @@
 public enum YogaDisplay {
   FLEX(0),
   NONE(1),
-  CONTENTS(2);
+  CONTENTS(2),
+  GRID(3);
 
   private final int mIntValue;
 
@@ -29,6 +30,7 @@ public static YogaDisplay fromInt(int value) {
       case 0: return FLEX;
       case 1: return NONE;
       case 2: return CONTENTS;
+      case 3: return GRID;
       default: throw new IllegalArgumentException("Unknown enum value: " + value);
     }
   }

java/com/facebook/yoga/YogaGridTrackType.java

@@ -0,0 +1,39 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// @generated by enums.py
+
+package com.facebook.yoga;
+
+public enum YogaGridTrackType {
+  AUTO(0),
+  POINTS(1),
+  PERCENT(2),
+  FR(3),
+  MINMAX(4);
+
+  private final int mIntValue;
+
+  YogaGridTrackType(int intValue) {
+    mIntValue = intValue;
+  }
+
+  public int intValue() {
+    return mIntValue;
+  }
+
+  public static YogaGridTrackType fromInt(int value) {
+    switch (value) {
+      case 0: return AUTO;
+      case 1: return POINTS;
+      case 2: return PERCENT;
+      case 3: return FR;
+      case 4: return MINMAX;
+      default: throw new IllegalArgumentException("Unknown enum value: " + value);
+    }
+  }
+}

java/com/facebook/yoga/YogaJustify.java

@@ -10,12 +10,16 @@
 package com.facebook.yoga;
 
 public enum YogaJustify {
-  FLEX_START(0),
-  CENTER(1),
-  FLEX_END(2),
-  SPACE_BETWEEN(3),
-  SPACE_AROUND(4),
-  SPACE_EVENLY(5);
+  AUTO(0),
+  FLEX_START(1),
+  CENTER(2),
+  FLEX_END(3),
+  SPACE_BETWEEN(4),
+  SPACE_AROUND(5),
+  SPACE_EVENLY(6),
+  STRETCH(7),
+  START(8),
+  END(9);
 
   private final int mIntValue;
 
@@ -29,12 +33,16 @@ public int intValue() {
 
   public static YogaJustify fromInt(int value) {
     switch (value) {
-      case 0: return FLEX_START;
-      case 1: return CENTER;
-      case 2: return FLEX_END;
-      case 3: return SPACE_BETWEEN;
-      case 4: return SPACE_AROUND;
-      case 5: return SPACE_EVENLY;
+      case 0: return AUTO;
+      case 1: return FLEX_START;
+      case 2: return CENTER;
+      case 3: return FLEX_END;
+      case 4: return SPACE_BETWEEN;
+      case 5: return SPACE_AROUND;
+      case 6: return SPACE_EVENLY;
+      case 7: return STRETCH;
+      case 8: return START;
+      case 9: return END;
       default: throw new IllegalArgumentException("Unknown enum value: " + value);
     }
   }

javascript/src/generated/YGEnums.ts

@@ -17,6 +17,8 @@ export enum Align {
   SpaceBetween = 6,
   SpaceAround = 7,
   SpaceEvenly = 8,
+  Start = 9,
+  End = 10,
 }
 
 export enum BoxSizing {
@@ -39,6 +41,7 @@ export enum Display {
   Flex = 0,
   None = 1,
   Contents = 2,
+  Grid = 3,
 }
 
 export enum Edge {
@@ -73,19 +76,31 @@ export enum FlexDirection {
   RowReverse = 3,
 }
 
+export enum GridTrackType {
+  Auto = 0,
+  Points = 1,
+  Percent = 2,
+  Fr = 3,
+  Minmax = 4,
+}
+
 export enum Gutter {
   Column = 0,
   Row = 1,
   All = 2,
 }
 
 export enum Justify {
-  FlexStart = 0,
-  Center = 1,
-  FlexEnd = 2,
-  SpaceBetween = 3,
-  SpaceAround = 4,
-  SpaceEvenly = 5,
+  Auto = 0,
+  FlexStart = 1,
+  Center = 2,
+  FlexEnd = 3,
+  SpaceBetween = 4,
+  SpaceAround = 5,
+  SpaceEvenly = 6,
+  Stretch = 7,
+  Start = 8,
+  End = 9,
 }
 
 export enum LogLevel {
@@ -146,6 +161,8 @@ const constants = {
   ALIGN_SPACE_BETWEEN: Align.SpaceBetween,
   ALIGN_SPACE_AROUND: Align.SpaceAround,
   ALIGN_SPACE_EVENLY: Align.SpaceEvenly,
+  ALIGN_START: Align.Start,
+  ALIGN_END: Align.End,
   BOX_SIZING_BORDER_BOX: BoxSizing.BorderBox,
   BOX_SIZING_CONTENT_BOX: BoxSizing.ContentBox,
   DIMENSION_WIDTH: Dimension.Width,
@@ -156,6 +173,7 @@ const constants = {
   DISPLAY_FLEX: Display.Flex,
   DISPLAY_NONE: Display.None,
   DISPLAY_CONTENTS: Display.Contents,
+  DISPLAY_GRID: Display.Grid,
   EDGE_LEFT: Edge.Left,
   EDGE_TOP: Edge.Top,
   EDGE_RIGHT: Edge.Right,
@@ -176,15 +194,24 @@ const constants = {
   FLEX_DIRECTION_COLUMN_REVERSE: FlexDirection.ColumnReverse,
   FLEX_DIRECTION_ROW: FlexDirection.Row,
   FLEX_DIRECTION_ROW_REVERSE: FlexDirection.RowReverse,
+  GRID_TRACK_TYPE_AUTO: GridTrackType.Auto,
+  GRID_TRACK_TYPE_POINTS: GridTrackType.Points,
+  GRID_TRACK_TYPE_PERCENT: GridTrackType.Percent,
+  GRID_TRACK_TYPE_FR: GridTrackType.Fr,
+  GRID_TRACK_TYPE_MINMAX: GridTrackType.Minmax,
   GUTTER_COLUMN: Gutter.Column,
   GUTTER_ROW: Gutter.Row,
   GUTTER_ALL: Gutter.All,
+  JUSTIFY_AUTO: Justify.Auto,
   JUSTIFY_FLEX_START: Justify.FlexStart,
   JUSTIFY_CENTER: Justify.Center,
   JUSTIFY_FLEX_END: Justify.FlexEnd,
   JUSTIFY_SPACE_BETWEEN: Justify.SpaceBetween,
   JUSTIFY_SPACE_AROUND: Justify.SpaceAround,
   JUSTIFY_SPACE_EVENLY: Justify.SpaceEvenly,
+  JUSTIFY_STRETCH: Justify.Stretch,
+  JUSTIFY_START: Justify.Start,
+  JUSTIFY_END: Justify.End,
   LOG_LEVEL_ERROR: LogLevel.Error,
   LOG_LEVEL_WARN: LogLevel.Warn,
   LOG_LEVEL_INFO: LogLevel.Info,

yoga/YGEnums.cpp

@@ -29,6 +29,10 @@ const char* YGAlignToString(const YGAlign value) {
       return "space-around";
     case YGAlignSpaceEvenly:
       return "space-evenly";
+    case YGAlignStart:
+      return "start";
+    case YGAlignEnd:
+      return "end";
   }
   return "unknown";
 }
@@ -73,6 +77,8 @@ const char* YGDisplayToString(const YGDisplay value) {
       return "none";
     case YGDisplayContents:
       return "contents";
+    case YGDisplayGrid:
+      return "grid";
   }
   return "unknown";
 }
@@ -141,6 +147,22 @@ const char* YGFlexDirectionToString(const YGFlexDirection value) {
   return "unknown";
 }
 
+const char* YGGridTrackTypeToString(const YGGridTrackType value) {
+  switch (value) {
+    case YGGridTrackTypeAuto:
+      return "auto";
+    case YGGridTrackTypePoints:
+      return "points";
+    case YGGridTrackTypePercent:
+      return "percent";
+    case YGGridTrackTypeFr:
+      return "fr";
+    case YGGridTrackTypeMinmax:
+      return "minmax";
+  }
+  return "unknown";
+}
+
 const char* YGGutterToString(const YGGutter value) {
   switch (value) {
     case YGGutterColumn:
@@ -155,6 +177,8 @@ const char* YGGutterToString(const YGGutter value) {
 
 const char* YGJustifyToString(const YGJustify value) {
   switch (value) {
+    case YGJustifyAuto:
+      return "auto";
     case YGJustifyFlexStart:
       return "flex-start";
     case YGJustifyCenter:
@@ -167,6 +191,12 @@ const char* YGJustifyToString(const YGJustify value) {
       return "space-around";
     case YGJustifySpaceEvenly:
       return "space-evenly";
+    case YGJustifyStretch:
+      return "stretch";
+    case YGJustifyStart:
+      return "start";
+    case YGJustifyEnd:
+      return "end";
   }
   return "unknown";
 }

yoga/YGEnums.h

@@ -22,7 +22,9 @@ YG_ENUM_DECL(
     YGAlignBaseline,
     YGAlignSpaceBetween,
     YGAlignSpaceAround,
-    YGAlignSpaceEvenly)
+    YGAlignSpaceEvenly,
+    YGAlignStart,
+    YGAlignEnd)
 
 YG_ENUM_DECL(
     YGBoxSizing,
@@ -44,7 +46,8 @@ YG_ENUM_DECL(
     YGDisplay,
     YGDisplayFlex,
     YGDisplayNone,
-    YGDisplayContents)
+    YGDisplayContents,
+    YGDisplayGrid)
 
 YG_ENUM_DECL(
     YGEdge,
@@ -79,6 +82,14 @@ YG_ENUM_DECL(
     YGFlexDirectionRow,
     YGFlexDirectionRowReverse)
 
+YG_ENUM_DECL(
+    YGGridTrackType,
+    YGGridTrackTypeAuto,
+    YGGridTrackTypePoints,
+    YGGridTrackTypePercent,
+    YGGridTrackTypeFr,
+    YGGridTrackTypeMinmax)
+
 YG_ENUM_DECL(
     YGGutter,
     YGGutterColumn,
@@ -87,12 +98,16 @@ YG_ENUM_DECL(
 
 YG_ENUM_DECL(
     YGJustify,
+    YGJustifyAuto,
     YGJustifyFlexStart,
     YGJustifyCenter,
     YGJustifyFlexEnd,
     YGJustifySpaceBetween,
     YGJustifySpaceAround,
-    YGJustifySpaceEvenly)
+    YGJustifySpaceEvenly,
+    YGJustifyStretch,
+    YGJustifyStart,
+    YGJustifyEnd)
 
 YG_ENUM_DECL(
     YGLogLevel,