Skip to content

Navigation Menu

Sign in
Sign up

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

Open
intergalacticspacehighway wants to merge 4 commits into
react:main from
intergalacticspacehighway:css-grid-2-auto-placement-57459
Open

CSS Grid algorithm 2/N: auto-placement #1994
intergalacticspacehighway wants to merge 4 commits into
react:main from
intergalacticspacehighway:css-grid-2-auto-placement-57459

Conversation

@intergalacticspacehighway

@intergalacticspacehighway intergalacticspacehighway commented Jul 11, 2026 •
edited
Loading

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 #1894 PR.

intergalacticspacehighway marked this pull request as ready for review July 11, 2026 15:23
@facebook-github-tools facebook-github-tools Bot added the Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team. label Jul 11, 2026 
Implements the CSS Grid item placement algorithm for grid-auto-flow: row with
sparse packing, per the spec:
https://www.w3.org/TR/css-grid-1/#auto-placement-algo
- AutoPlacement: the four-step placement algorithm
- LinePlacement: grid-line resolution, including invalid-input handling
 (line 0 is treated as auto; span 0 and negative spans clamp to 1)
- OccupancyGrid: overlap tracking for placed items
- C++ unit and integration tests
Dense packing and column flow (grid-auto-flow: dense / column) are not yet
implemented.
optimise

meta-codesync Bot commented Jul 13, 2026

Copy link
Copy Markdown

@rozele has imported this pull request. If you are a Meta employee, you can view this 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 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 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

Copy link
Copy Markdown
Contributor Author

@rozele are we going to merge 1 and 2 and then i make PR for 3?
slorber reacted with eyes emoji

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

CLA Signed Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

AltStyle によって変換されたページ (->オリジナル) /