Week 04 · Asymmetric Responsive Content Grid

The primary Trading Dashboard workspace gains a clear visual hierarchy.

This milestone preserves the Week 02 token system and the Week 03 semantic frame, then converts the central <main> workspace into a dense asymmetric grid with one dominant featured card and five supporting market modules.

01

Progress preserved, architecture extended

Each milestone remains independently reviewable while Week 04 builds directly on the previous two foundations.

Week 02

Design system tokens

OKLCH colors, fluid type, spacing variables, borders, focus states, and theme roles remain the visual source of truth.

Week 03

Semantic dashboard frame

The command header, left rail, market workspace, context drawer, and status footer remain structurally intact.

Week 04

Asymmetric content hierarchy

The central workspace now organizes six market cards around a two-column, two-row featured card.

02

Asymmetric market workspace

A dominant overview card anchors the layout while dense auto-placement keeps smaller modules tightly composed.

Market command header

Asymmetric workspace preview

Featured market overview

Cross-market pulse

Layout sample

The dominant card spans two columns and two rows so the primary market story receives more visual weight than supporting modules.

Track
2 columns
Depth
2 rows
Flow
Dense

Stocks

Watchlist scan

  • AAPLPrimary
  • MSFTSecondary
  • NVDACompare

Crypto

Digital asset radar

  • BTCMacro
  • ETHNetwork
  • SOLMomentum

Portfolio

Technique stack

Trend · SMA / EMA / VWAP Momentum · RSI / MACD / Stochastic Volatility · Bollinger / ATR / ADX

Comparison

Relative strength

Large capBaseline
CryptoVolatile
CashDefensive

Risk context

Confluence queue

Fibonacci · Volume Profile · OBV · Pivot Points · Support/Resistance · Candlestick Patterns · Divergence · Ichimoku · Parabolic SAR

Week 04 layout preview · Static educational content · No live market feed

03

Grid architecture and token reuse

The layout formula is modern, fluid, and intentionally connected to the existing design system.

display: grid

Parent-owned composition

The central workspace owns column tracks, row behavior, gaps, and placement rules.

span 2

Featured-card hierarchy

The hero card spans two columns and two rows on wide viewports.

minmax() + fr

Fluid track math

Three fractional columns share available space while allowing content to shrink safely.

dense

Gap prevention

grid-auto-flow: dense backfills available cells as cards reflow.

var(--space-sm)

Unified spacing

Grid gaps and compact card padding use the established spacing scale.

1 column

Mobile reading order

At narrow widths every span resets so cards follow a clean document sequence.

.market-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(9rem, auto);
  grid-auto-flow: dense;
  gap: var(--space-sm);
}

.market-card--hero {
  grid-column: span 2;
  grid-row: span 2;
}

@media (max-width: 38rem) {
  .market-grid { grid-template-columns: 1fr; }
  .market-card--hero { grid-column: auto; grid-row: auto; }
}
04

Week 04 verification

The milestone is ready only after the grid, content boundaries, spacing, themes, and archive behavior are checked.

  • Use DevTools Grid Inspector and confirm three proportional fr tracks at wide widths.
  • Confirm the featured card spans two columns and two rows without overlapping another card.
  • Resize through desktop, tablet, and mobile widths and confirm dense placement avoids empty holes.
  • Verify text, lists, bars, and labels remain inside every card without clipping or page-level overflow.
  • Inspect card gaps and padding and confirm they use --space-sm and --space-md.
  • Switch every installed style family between dark and light mode and confirm the full page remains themed.
  • Open Weeks 02, 03, and 04 directly and confirm the earlier milestones remain unchanged.
Scope boundary

This is a static layout milestone. The symbols and visual bars demonstrate composition only; no live prices, broker actions, financial recommendations, or production data feeds are implemented.