Chapter 9: Real-World Responsive Design Without Frameworks

Build layouts that scale beautifully: no frameworks, no breakpoints hell, just smart CSS

Responsive design isn’t about “mobile-first” vs “desktop-first.”
It’s about building layouts that respond intelligently to screen size and context.

And no, you don’t need Bootstrap, Tailwind, or media query to do it well.

alt text

This chapter walks you through how to build flexible, resilient, and scalable layouts: from fluid typography to container queries using just CSS and your brain.

Section 9.1: What Responsive Design Actually Means

Responsive = content adapts to available space.

Not “stack it all on mobile” or “hide half the UI on tablets.”

Think in terms of:

Flow instead of fixed positions
Proportions instead of pixels
Available space, not arbitrary breakpoints

Section 9.2: Fluid Layout Basics (Without Media Queries)

Start with:

html {
  font-size: 100%;
}

body {
  margin: 0;
  padding: 1rem;
  max-width: 80ch;
  line-height: 1.5;
}

Use rem/em for spacing
Use % or fr for layout width
Let elements grow/shrink naturally

A layout that works at 360px and 1440px without media queries is the dream. And it’s very achievable.

Section 9.3: When to Actually Use Media Queries

You only need breakpoints when:

Layout fundamentally changes
Font size/spacing becomes unreadable
You’re dealing with truly different screen classes (e.g. mobile vs TV)

Good breakpoints are based on content,not device.

@media (min-width: 600px) {
  .sidebar {
    display: block;
  }
}

Prefer em or rem breakpoints:

@media (min-width: 40em) { ... }

This scales better with user font size settings.

Section 9.4: Mobile-First Strategy

Start with narrow screens, then expand:

.card {
  display: block;
}

@media (min-width: 768px) {
  .card {
    display: flex;
  }
}

This avoids the trap of designing for desktop and then duct-taping for mobile.

Section 9.5: Flexbox and Grid: The Real MVPs of Responsiveness

Flexbox:

Use flex-wrap: wrap to allow items to break lines
Combine with gap for fluid spacing
Use flex: 1 to distribute space across items

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.card {
  flex: 1 1 300px;
}

Grid:

Use auto-fit / auto-fill with minmax for dynamic layouts

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

This layout adapts across all screen sizes without a single media query.

Section 9.6: Container Queries: The Future (That’s Already Here)

Container queries let you apply styles based on the size of the container, not the viewport.

@container (min-width: 400px) {
  .card {
    flex-direction: row;
  }
}

Enable with:

.container {
  container-type: inline-size;
}

Works in Chrome, Safari, Edge
Firefox support is shipping

Use it for:

Component-level responsiveness
Cards, navs, widgets, and reusable blocks

Section 9.7: Fluid Typography with `clamp()`

font-size: clamp(1rem, 2vw + 0.5rem, 2.25rem);

Scales text size based on viewport, no breakpoints needed.

Section 9.8: Real Patterns to Build

@media (min-width: 768px) {
  .nav {
    display: flex;
    justify-content: space-between;
  }
}

Responsive card grid:

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

Hero section with content + image:

Use Grid on large screens, Stack on mobile:

.hero {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 800px) {
  .hero {
    grid-template-columns: 1fr 1fr;
  }
}

Summary

Responsive design is not about breakpoints.It’s about flexibility
Start mobile-first with fluid units
Use Flexbox and Grid to create layouts that adapt by default
Use media queries only when layout really needs to change
Use container queries for component-level responsiveness
Use clamp() for typography that scales naturally

Resources

Coming Up Next

In Chapter 10, we’ll build UI animations the right way with performance in mind. You’ll learn when to use transitions, when to avoid transform, and how to animate without jank.

← Previous Next →