Start with one column on narrow screens; add tu-md-grid-cols-3 at a breakpoint so cards reflow without separate HTML per device.
Going deeper
In production utility-first CSS work, Responsive grid patterns matters when documents, stylesheets, or apps must stay maintainable across teams and releases—not only in isolated demos.
Common pitfalls
Watch for copy-paste configs, skipping validation or tests, and mixing concerns (structure vs presentation vs behavior) in one layer.
Practice
- Apply one technique from this lesson in the playground.
- Write one interview-style sentence explaining when you would use responsive grid patterns on a real project.
Challenge
Resize the grid
- Narrow the preview below 40rem — cards stack.
- Widen past the breakpoint — three columns appear.
Done when: layout switches between one and three columns.