FrontendHaltCSS·Intermediate·Scenario based·1 min read
What makes a design responsive beyond media queries?
Short interview answer
Responsive design uses fluid sizing, flexible layout, content-safe constraints, and capability or preference queries. Breakpoints should respond where content stops working, not to a fixed list of device models.
Example
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));}/* columns adapt to available width — no breakpoint list needed */Key takeaway
Explain the underlying mental model clearly, then support it with a concrete example and its trade-offs.