Skill ID: Responsiveness_42
Description: Adjust grid columns or flex item wrapping based on screen size.
Where to apply: Product grids, photo galleries.
Key Tailwind Classes:
grid-cols-1 sm:grid-cols-2 md:grid-cols-4
Gotcha:
Forgetting the base case (smallest screen). Classes like
sm:grid-cols-2 md:grid-cols-4
imply
grid-cols-1
(or whatever the default number of columns is) for screens smaller than
sm
. Being explicit (
grid-cols-1 sm:grid-cols-2
...) is often clearer.