Skip to content

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

Open
rozele wants to merge 2 commits into
react:mainfrom
rozele:export-D111722622
Open

CSS Grid algorithm 2/N: auto-placement (#57532)#57532
rozele wants to merge 2 commits into
react:mainfrom
rozele:export-D111722622

Conversation

@rozele

@rozele rozele commented Jul 13, 2026

Copy link
Copy Markdown
Contributor

Summary:

Implements the CSS Grid auto placement algorithm (§8.5).

How?

  • AutoPlacement — the four-step placement algorithm.
  • LinePlacement — grid-line resolution (§8.3), 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

cc - rozele This a small chunk from react/yoga#1894 PR.

X-link: react/yoga#1994

Differential Revision: D111722622

Pulled By: rozele

Differential Revision: D110780559
@meta-cla meta-cla Bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Jul 13, 2026
@meta-codesync

meta-codesync Bot commented Jul 13, 2026

Copy link
Copy Markdown

@rozele has exported this pull request. If you are a Meta employee, you can view the originating Diff in D111722622.

rozele pushed a commit to rozele/react-native-macos that referenced this pull request Jul 13, 2026
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
@rozele rozele force-pushed the export-D111722622 branch from 30a5aca to aa61ab1 Compare July 13, 2026 15:39
@meta-codesync meta-codesync Bot changed the title CSS Grid algorithm 2/N: auto-placement CSS Grid algorithm 2/N: auto-placement (#57532) Jul 13, 2026
@rozele rozele force-pushed the export-D111722622 branch from aa61ab1 to 44c0d10 Compare July 13, 2026 16:39
rozele pushed a commit to rozele/react-native-macos that referenced this pull request Jul 13, 2026
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#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
@rozele rozele force-pushed the export-D111722622 branch from 44c0d10 to 9c09210 Compare July 13, 2026 16:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. meta-exported p: Facebook Partner: Facebook Partner

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants