Creating layouts that last
summary
Claim: spacing is the main cause of layout rot, so layout should be a composable React concept. Implementation: atomic layout built with React, CSS grid and styled‑components exposes template areas, responsive props, prop aliases and an only component for breakpoint conditions. Demo shows an apartments list that rearranges columns, adds conditional buttons and scales without breaking. CSS is scoped to compositions, reducing accidental regressions; browser support for CSS Grid sits at about 90–93%.
AI-written summary · about
chapters (15)
- 0:00Start
- 0:30Layout
- 0:47Maintenance flow
- 2:12Problems
- 2:54Contextual
- 3:59Spacing is hard
- 6:32Features
- 10:51Default measurement unit
- 11:07Difference
- 12:06Delegated spacing
- 12:31Scoped specificity
- 13:27Learn concepts, not tools.
- 13:38Demo
- 23:10Documentation
- 23:33Repository
