CSS Grid Layout (Level 1) #126

Overview#

Implement CSS Grid Layout Module Level 1 — the core grid layout algorithm.

Requirements#

Parsing#

• Parse grid container properties:
  • display: grid / display: inline-grid
  • grid-template-columns / grid-template-rows: track sizing with <length>, <percentage>, fr, auto, min-content, max-content, minmax(min, max), repeat(count, tracks)
  • grid-template-areas: named grid areas
  • grid-auto-columns / grid-auto-rows: implicit track sizing
  • grid-auto-flow: row, column, dense
  • gap / row-gap / column-gap
• Parse grid item properties:
  • grid-column-start / grid-column-end / grid-column
  • grid-row-start / grid-row-end / grid-row
  • grid-area
  • Line numbers, span N, named lines/areas

Grid Layout Algorithm#

• Resolve explicit grid (from template definitions)
• Place items with explicit positions
• Auto-place remaining items (row-first or column-first, with dense packing)
• Track sizing algorithm:
  1. Initialize track sizes (base size and growth limit)
  2. Resolve intrinsic track sizes using item contributions
  3. Maximize tracks (distribute remaining space)
  4. Expand flexible tracks (fr units)
  5. Stretch auto tracks
• Resolve item positions within their grid areas
• Handle alignment: justify-items, align-items, justify-content, align-content, justify-self, align-self

Integration#

• Extend CSS parser in crates/css/ for grid properties
• Add grid layout mode to crates/layout/ alongside existing block and inline layout
• Grid containers establish a new formatting context for their children

Acceptance Criteria#

• display: grid creates a grid container
• grid-template-columns: 1fr 2fr 1fr creates three columns
• grid-template-rows: auto 100px auto sizes rows correctly
• fr units distribute remaining space proportionally
• minmax() and repeat() work in track definitions
• Grid items can be placed with grid-column / grid-row
• grid-template-areas with named areas works
• Auto-placement fills cells in order
• gap adds spacing between tracks
• Alignment properties position items within their areas
• All existing tests continue to pass
• Unit tests for track sizing algorithm, auto-placement, and alignment