feat(grid): part2 & part3 (#762)

1. add repeat auto-fill/fit-content parsing & serialization 2. add repeat auto-fill/fit-content parsing & serialization 3. support auto-flow and grid-area 4. add some integration tests <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** - Expanded CSS Grid: named lines, template areas, auto-fit/auto-fill, minmax/fit-content sizing, per-item alignment, and new shorthand support (grid, grid-template, place-content, place-self, grid-area); added justify-items and justify-self. * **Tests** - Large suite of new and enhanced grid integration/unit tests covering auto-placement, track sizing, shorthands, template areas, dense flows, and visual snapshots. * **Documentation** - Updated roadmap/plan with Phase 4/5 progress and next steps for shorthands, parsing, and hardening. * **Chore** - Added ignore rule for .preview-bundles/* in VCS ignore. <sub>✏️ Tip: You can customize this high-level summary in your review settings.</sub> <!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: andycall

.gitignore

@@ -69,3 +69,4 @@ pubspec.lock
 .fvm
 
 **/.claude/settings.local.json
+.preview-bundles/*

CSS_GRID_PLAN.md

@@ -46,6 +46,7 @@
 - **Phase 4 – Alignment & Template Features**
  - Add `justify-content`, `align-content`, `justify-items`, `align-items`, per-item overrides, and template serialization (`grid-template-rows/columns`).
  - Extend parsing for `repeat()`, `minmax()`, and named lines/areas if planned for MVP.
+ - Status: per-item alignment plus `place-*` shorthands now have widget + integration coverage, and `grid-auto-flow: row|column dense` behavior is verified through layout assertions.
  - Tests: alignment-focused widget suites, computed-style integration checks.
 
 - **Phase 5 – Hardening & Docs**
@@ -67,18 +68,23 @@
 - **Docs & Communication:** Keep `dev_css_grid_process.md` and CSS_GRID_PLAN.md updated; highlight new capabilities in release notes when features stabilize.
 
 **Next Steps**
-Computed-style serialization + tests for grid templates/placements are now in tree (see `grid_computed_style_test.dart` and `css-grid/computed-style.ts`). Upcoming focus areas:
+Track sizing/placement for MVP grids now ships with widget + integration coverage, and per-item alignment plumbing is partially in-tree. Upcoming focus areas:
 
-1. Continue Phase 3 track sizing/placement: add implicit rows + column-flow growth, improve gap accounting, and honor fr/percentage mixes for auto tracks.
-2. Add alignment/template serialization refinements plus docs as features land.
-3. Capture layout/perf findings in `dev_css_grid_process.md` alongside new coverage as features flip on.
+1. Begin Phase 5 hardening by profiling `RenderGridLayout` hot paths (auto-placement + track resolution), enumerating slow cases, and sketching caching/intrinsic sizing fixes.
+2. Implement the `grid` shorthand property (per MDN / CSS Grid 1) as a thin layer over existing longhands (`grid-template-*`, `grid-auto-*`), covering the common `none`, template, and auto-flow forms and deferring subgrid/masonry keywords per non-goals.
+3. Add a basic `grid-template` shorthand (rows/columns/areas) parser to align with authors’ expectations for shorthand usage while still delegating storage to existing typed fields.
+4. Expand track-size parsing to gracefully ignore unsupported keywords like `min-content`/`max-content` in grid track lists (where they are not yet wired into layout), and document the current support level in `dev_css_grid_process.md`.
+5. Stress-test grid layouts inside representative app flows (dashboard, list virtualization) to validate performance/behavioral stability before GA.
+6. Flip on `DebugFlags.enableCssGridProfiling` during perf sessions to capture per-grid timing for materialization, placement, and child layout.
+7. Continue filling integration matrix: template-area happy-path + auto-fit/place-content + template-area overlap/unknown-area cases landed; next targets are shorthand-centric specs (e.g., `grid` / `grid-template`) and dense auto-fill dashboards with per-item overrides.
 
 **TODOs**
 - [x] Capture overview/goals/scope plus risks and rollout strategy.
-- [ ] Land Phase 1 plumbing (display enum, CSSGridMixin, shorthand parsing, auxiliary helpers).
-- [ ] Add Phase 1 widget + integration tests (parsing/computed style) and wire to spec group.
+- [x] Land Phase 1 plumbing (display enum, CSSGridMixin, shorthand parsing, auxiliary helpers).
+- [x] Add Phase 1 widget + integration tests (parsing/computed style) and wire to spec group.
 - [x] Implement `RenderGridLayout` skeleton and hook creation paths.
-- [ ] Implement full track sizing/placement (Phase 3) with tests.
-- [ ] Extend alignment/template features (Phase 4) with serialization and coverage.
+- [x] Implement full track sizing/placement (Phase 3) with tests.
+- [x] Extend alignment/template features (Phase 4) with serialization and coverage (per-item alignment + computed styles partially landed).
 - [x] Complete computed-style serialization and integration specs for grid properties.
 - [ ] Profile and harden grid layout (Phase 5), updating docs/examples.
+- [ ] Add `grid` and `grid-template` shorthands on top of existing longhands, with focused integration specs under `integration_tests/specs/css/css-grid`.

integration_tests/lib/playground.dart

@@ -39,7 +39,6 @@ void main() async {
  // FlexLog.enableAll();
  // FlowLog.enableAll();
  // PositionedLayoutLog.enableAll();
- DebugFlags.enableCssGridLayout = true;
  // debugPaintBaselinesEnabled = true;
  // DebugFlags.enableDomLogs = true;
  // DebugFlags.enableCssLogs = true;