Problem Statement
You need a 3-column layout that collapses to one column on mobile. How will you do it using CSS Grid?
Explanation
You can define a 3-column grid using `grid-template-columns: repeat(3, 1fr)` and then use a media query to switch to `1fr` below a breakpoint. This approach creates responsive columns without extra markup or frameworks.
Code Solution
SolutionRead Only
.grid { grid-template-columns: repeat(3,1fr); } @media(max-width:768px){ .grid{ grid-template-columns:1fr; } }