Skip to content

feat: implement CSS order property for flex and grid items#919

Open
jacquesg wants to merge 1 commit intoDioxusLabs:mainfrom
jacquesg:feat/css-order
Open

feat: implement CSS order property for flex and grid items#919
jacquesg wants to merge 1 commit intoDioxusLabs:mainfrom
jacquesg:feat/css-order

Conversation

@jacquesg
Copy link

Objective

Implement the CSS order property for flex and grid items, as defined in CSS Display Module Level 3 §3.

This allows users to control the visual ordering of flex and grid children independently of their source (DOM) order, which is a commonly expected CSS feature that taffy was missing.

Context

The CSS order property is an integer (default 0) that controls:

  • Flexbox (§5.4): The order in which flex items appear within their flex container during layout.
  • CSS Grid (§6.3): The order-modified document order used during auto-placement.

Items with lower order values are laid out first. Items with equal order values preserve their source order (stable sort).

Changes

  • Added order: i32 field to Style (gated behind flexbox or grid features)
  • Added order() method to both FlexboxItemStyle and GridItemStyle traits (defaults to 0 for backwards compatibility)
  • Flexbox: After generating flex items, stable-sort them by order and reassign visual indices
  • Grid: Sort children by order before auto-placement, assign visual order before track sizing
  • Added order field to GridItem to carry visual order through to final positioning
  • Comprehensive tests covering reordering, source-order stability, and negative values for both flex and grid

Feedback wanted

The order property is defined once in CSS Display Level 3 but applies to both flex and grid contexts. I added order() to both FlexboxItemStyle and GridItemStyle traits separately
(each defaulting to 0) rather than pulling it into CoreStyle. This avoids a larger trait refactor while keeping backwards compatibility for custom style implementations. Open to feedback on whether a shared trait approach would be preferred.

@alice-i-cecile alice-i-cecile added the enhancement New feature or request label Feb 21, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants