What this page combines
auto-fit + minmax()
grid-column
named grid areas
flex wrapping
grow + shrink + basis
semantic sections
Grid coordinates cards in two dimensions. Flexbox handles one-dimensional content inside those cards and lets small components wrap independently.
Weekly summary
18 tasks done
6 in review
3 blocked
82% complete
Next tasks
- Review field notesToday
- Test card layoutsWed
- Publish summaryFri
Next milestone
Complete accessibility review, resolve blocked tasks, and prepare the Friday release notes.
Why these choices?
repeat(auto-fit, minmax(16rem, 1fr)) adds or removes columns as room changes. The metric row uses flex: 1 1 7rem, so its smaller units distribute space and wrap without controlling the page structure.