Skip to content

Grid: exclude items with auto block-axis margins from baseline alignment - #1125

Merged
nicoburns merged 2 commits into
mainfrom
devin/1787096437-grid-baseline-auto-margin
Aug 18, 2026
Merged

Grid: exclude items with auto block-axis margins from baseline alignment#1125
nicoburns merged 2 commits into
mainfrom
devin/1787096437-grid-baseline-auto-margin

Conversation

@nicoburns

Copy link
Copy Markdown
Member

Objective

Per css-align-3 §9.5, a box with an auto margin in the relevant axis does not participate in baseline alignment. The grid algorithm didn't check for this: the container's first-baseline selection preferred any first-row item with align-self: baseline (even with an auto block-axis margin), and such items were also baseline-shimmed during track sizing.

This is observable in WPT css/css-grid/alignment/grid-baseline-001.html sub-case "We don't participate in baseline alignment if there's an auto margin": an inline-grid with children <div>baseline</div> and <div style="align-self: baseline; margin-top: auto">below</div> should generate its baseline from the first item, but taffy picked the auto-margin item.

Context

The fix mirrors the existing flexbox implementation (FlexItem::participates_in_baseline_alignment, which checks that neither cross-axis margin is auto):

  • New GridItem::participates_in_baseline_alignment():
    self.align_self == AlignSelf::BASELINE && !self.margin.top.is_auto() && !self.margin.bottom.is_auto()
  • Container first-baseline selection (compute/grid/mod.rs) now picks the first first-row item that participates in baseline alignment, falling back to the row's first item in grid order
  • has_baseline_aligned_item and resolve_item_baselines (track_sizing.rs) use the same predicate: only participating items are counted, have their baselines resolved, and receive a baseline_shim. Non-participating items (including auto-margin items) are no longer shimmed, so an auto-margin item is bottom-aligned by its auto margin instead

Tests: two new generated-test fixtures mirroring the WPT sub-case (grid_baseline_child_auto_margin_container_baseline, grid_align_items_baseline_child_auto_margin); all 8 generated permutations fail on main and pass with this fix. Full test suite regenerated with just gentest; cargo test --workspace, cargo fmt and cargo clippy are clean.

Link to Devin session: https://dioxus.staging.devinenterprise.com/sessions/9ea93cbb618a491a9f4240b8a4780893
Requested by: @nicoburns

Per css-align-3 §9.5, a box with an auto margin in the relevant axis does
not participate in baseline alignment. Matches the flexbox implementation's
participates_in_baseline_alignment check.
@staging-devin-ai-integration

Copy link
Copy Markdown

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

  • Address comments on this PR that start with 'DevinAI' or '@devin'.
  • Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

  • Disable automatic comment, CI, and merge conflict monitoring

@nicoburns
nicoburns merged commit e85c605 into main Aug 18, 2026
28 checks passed
@nicoburns
nicoburns deleted the devin/1787096437-grid-baseline-auto-margin branch August 18, 2026 23:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant