Phase 4 Step 1: CSS Grid layout

[thomasnemer]

Parent: #41

Goal

Implement CSS Grid Layout (Level 1) so that elements can be positioned using two-dimensional grid tracks, enabling modern page layouts.

Prerequisites

None

Implementation

• Parse grid container properties: grid-template-columns, grid-template-rows, grid-template-areas, grid-auto-flow, grid-auto-columns, grid-auto-rows, gap (row-gap, column-gap)
• Parse grid item properties: grid-column-start, grid-column-end, grid-row-start, grid-row-end, grid-area
• Implement track sizing functions: fr, minmax(), repeat(), auto-fill, auto-fit, min-content, max-content
• Implement grid layout algorithm per CSS Grid Level 1 spec (sections 7-12)
  • (a) Explicit grid with fixed sizes
  • (b) fr units and minmax()
  • (c) repeat() with auto-fill / auto-fit
  • (d) Auto-placement algorithm
  • (e) Named grid areas
  • (f) Alignment (justify-items, align-items, justify-content, align-content)

Tests

• Parsing round-trip tests for all grid properties
• Layout tests for explicit fixed-size grids
• Layout tests for fr, minmax(), repeat() track sizing
• Auto-placement tests (row vs column flow, sparse vs dense)
• Named areas tests
• Alignment tests

Acceptance Criteria

• All grid container and item properties parse correctly in ie-css
• Grid layout algorithm produces correct box positions for WPT grid test cases
• Grid items create stacking contexts as required by spec