# Responsive design recap — Responsive & Mobile-First Design Source: https://www.geekswithgeeks.com/en/responsive-design/responsive-recap > Review the three pillars of responsive design and how they work together to create adaptable, user-friendly layouts. ## The three pillars **1. Flexible grid**: Use %, em, rem for widths so content flows. **2. Media queries**: Apply different rules at different viewport sizes. **3. Flexible media**: Scale images, video, embeds proportionally. Together, these create layouts that adapt from 320px mobile screens to 2560px ultra-wide displays. ## A complete responsive example All three pillars in one practical example. ```html

Responsive Design

Example

Article 1

``` **Quiz:** Which of these is NOT a pillar of responsive design? - [ ] Flexible grid with percentage widths - [ ] Media queries for breakpoints - [x] Fixed-width containers - [ ] Flexible, scalable media *Answer:* Fixed-width containers. Fixed-width containers lock layouts to one size — the opposite of responsive design. Use flexible widths instead. ## Future trends Container queries, aspect-ratio, and newer media features are making responsive design even more powerful. ## Keep learning Responsive design is constantly evolving. Follow CSS Working Group specs, test new features, and adapt to user needs. ## Common myths about responsive Myth: Responsive means mobile version. Reality: It's one codebase, multiple presentations. Myth: Mobile-first means mobile only. Reality: It optimizes priorities. **Quiz:** Why is mobile-first better than desktop-first? - [x] Simpler CSS, forces prioritization, better performance - [ ] It's just a trend - [ ] Mobile users don't need features *Answer:* Simpler CSS, forces prioritization, better performance. Mobile-first CSS is cleaner, and you add complexity only when needed. ## Next: explore advanced patterns Now that you understand responsive fundamentals, explore component libraries, design systems, and responsive animation patterns.