Modern CSS Techniques for Responsive Design

Container Queries

Container queries allow components to adapt based on their container’s size, not just the viewport:

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

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

CSS Grid for Layouts

CSS Grid makes complex layouts simple and maintainable:

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

Custom Properties for Theming

CSS custom properties enable dynamic theming:

:root {
  --primary-color: #3b82f6;
  --spacing-unit: 8px;
}

.button {
  background: var(--primary-color);
  padding: calc(var(--spacing-unit) * 2);
}

Conclusion

These modern CSS features enable more maintainable, performant, and flexible designs. Embrace them in your next project!