Tracking issue: CSS Grid #34479
Description
This issue tracks progress in implementing CSS Grid:
Status:
- Initial support has been merged.
- Servo currently scores 38.5% on the WPT
css-gridtests (2024-12-05) - (note that the
css-gridtests include tests for Subgrid and Grid Lanes layout) - This issue tracks improvements towards spec 100% compliance.
Initial support
- Initial support (Layout: Implement CSS Grid using
taffy#32619) - WPT Testing
Additional Features
Small features
- Implement the "safe" alignment variants DioxusLabs/taffy#550
- Intrinsic sizing keywords (min/max/fit-content) for width/height DioxusLabs/taffy#751
- Support
directionproperty (right-to-left layout) DioxusLabs/taffy#213 (🚧 in progress)
Medium features
- layout(grid): implement named grid lines and areas #38306 (used by wikipedia and google)
- Support
calc()values in CSS Grid #34846 (needed for github)
Large features
- Support
writing-modeproperty (vertical inline axis) DioxusLabs/taffy#752 - Support Subgrid layout DioxusLabs/taffy#468
- Support
display: grid-lanes(aka masonry layout) DioxusLabs/taffy#910
Bugs
- getComputedStyle() should return resolved value for ‘grid-template-columns’ and ‘grid-template-rows’ #34537
- CSS Grid algorithm sometimes panics with
auto-fitrepetition is used - ‘position: absolute’ is busted inside grid items with ‘position: relative’ #34535
- Content inside grid-template LABEL fails to render #34604
- Wrong painting order of grid item backgrounds #34534
- Discrepancies in ‘width’ when <img> is a grid item #34533
- Percentage sizing of grid items is wrong:
- Some absolute position WPT tests are failing
Test failure triage (2025-08-04)
These results were run with #38306 and #34846.
The Category% is the percentage of subtest passes relative to the numebr of subsests in that category. All other percentages are relative to the total number of subtests in css-grid.
| Category | Subtests | Pass | Fail | Total% | Pass% | Fail% | Category% | ||
|---|---|---|---|---|---|---|---|---|---|
| abspos | 3031 | 397 | 2634 | 27% | 3.5% | 23.5% | 13.1% | ||
| alignment | 1682 | 525 | 1157 | 15% | 4.7% | 10.30% | 31.2% | ||
| => baseline | 569 | 94 | 457 | 5.1% | 0.8% | 4.2% | 16.5% | ||
| => vertical | 193 | 3 | 190 | 1.7% | 0% | 1.7% | 1.6% | ||
| animation | 1904 | 1378 | 526 | 17% | 12% | 5% | 72% | ||
| grid-definition | 1312 | 1047 | 265 | 11.70% | 9.3% | 2.4% | 79.8% | ||
| grid-items | 1060 | 372 | 688 | 9.4% | 3.3% | 6.1% | 35.1% | ||
| grid-model | 209 | 187 | 22 | 1.9% | 1.7% | 0.2% | 89.5% | ||
| layout-algorithm | 551 | 269 | 282 | 4.9% | 2.4% | 2.5% | 48.8% | ||
| parsing | 1418 | 1270 | 148 | 12.6% | 11.3% | 1.3% | 89.6% | ||
| placement | 46 | 41 | 5 | 0.4% | 0.4% | 0% | 89.1% | ||
| other | 221 | 208 | 13 | 2% | 1.9% | 0.1% | 94.1% | ||
| ALL TESTS | 11225 | 5507 | 5718 | 100% | 49.1% | 50.9% | 49.1% |
Full results: all-grid-tests.csv