Essential session storage is required to sign in. Optional analytics remain off unless you allow them.
Build a responsive multi-section page layout using CSS Grid for the 2D page structure and Flexbox for 1D component rows (nav, card footers) — pick each tool for the job it fits. Requirements: MOBILE-FIRST with min-width media queries; a responsive card grid using repeat(auto-fit, minmax(...)) that reflows WITHOUT hard-coded breakpoints; fluid type with clamp(); a sticky header via position: sticky; and correct use of gap. Add one tasteful transition or transform on hover, animating only transform/opacity, and respect prefers-reduced-motion. No layout hacks (floats/absolute) where Grid/Flex fit.
Grid for 2D + Flexbox for 1D chosen appropriately; auto-fit/minmax responsive grid; correct gap; sticky header; no float/absolute hacks.
Mobile-first min-width queries; fluid type (clamp); content reflows cleanly across sizes.
Animates transform/opacity only (not layout props); respects prefers-reduced-motion.
Use this README structure to make the work reviewable.
DevPath fetches a read-only, size-capped snapshot. Submitted code is never executed.
# A responsive layout with Flexbox + Grid ## Goal Build a responsive multi-section page layout using CSS Grid for the 2D page structure and Flexbox for 1D component rows (nav, card footers) — pick each tool for the job it fits. Requirements: MOBILE-FIRST with min-width media queries; a responsive card grid using repeat(auto-fit, minmax(...)) that reflows WITHOUT hard-coded breakpoints; fluid type with clamp(); a sticky header via position: sticky; and correct use of gap. Add one tasteful transition or transform on hover, animating only transform/opacity, and respect prefers-reduced-motion. No layout hacks (floats/absolute) where Grid/Flex fit. ## Acceptance criteria - [ ] Layout mastery: Grid for 2D + Flexbox for 1D chosen appropriately; auto-fit/minmax responsive grid; correct gap; sticky header; no float/absolute hacks. - [ ] Responsive & fluid: Mobile-first min-width queries; fluid type (clamp); content reflows cleanly across sizes. - [ ] Motion done right: Animates transform/opacity only (not layout props); respects prefers-reduced-motion. ## Verification - [ ] Document installation and run commands. - [ ] Record automated checks and their exact commands. - [ ] Add representative output, screenshots, or a short demo where useful. - [ ] Confirm failure paths and known constraints. ## Decision log ### Decision title - Context: - Choice: - Alternatives considered: - Tradeoffs: ## Evidence - Link each rubric criterion to the file, test, or artifact that demonstrates it. ## Known limitations - List what is intentionally out of scope and what should be improved next.