Responsive Design Patterns

Responsive Design Patterns

Building layouts that work beautifully across all screen sizes is both an art and a science. Let’s explore modern responsive design patterns using CSS Grid, Flexbox, and container queries.

Container Queries

The game-changer for component-based responsive design:

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

@container card (min-width: 400px) {
  .card {
    grid-template-columns: 200px 1fr;
  }
}

Fluid Typography

Scale text smoothly with clamp():

h1 {
  font-size: clamp(2rem, 5vw + 1rem, 4rem);
}

Grid Layouts

Auto-responsive grids without media queries:

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

Flexbox Patterns

Flexible layouts that adapt naturally:

.flex-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.flex-item {
  flex: 1 1 300px;
}

Modern Stack Layout

Use logical properties for better internationalization:

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

Aspect Ratio Boxes

Maintain aspect ratios with aspect-ratio:

.video-container {
  aspect-ratio: 16 / 9;
}

Conclusion

Modern CSS gives us powerful tools for responsive design. Container queries, in particular, enable truly modular components that adapt to their context, not just the viewport.

---