Modern CSS Tricks for Responsive Design

Responsive design is essential for today's web. Here are some modern CSS tricks to help your layouts shine on any device.

1. CSS Grid and Flexbox

Use CSS Grid for complex layouts and Flexbox for one-dimensional alignment.

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 1rem;
}

2. Clamp for Fluid Typography

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

3. Aspect-Ratio for Images

img.responsive {
  aspect-ratio: 16 / 9;
  width: 100%;
  object-fit: cover;
}

Markdown Image Example

If you see the illustration above, markdown image support is working!

4. Media Queries for Dark Mode

@media (prefers-color-scheme: dark) {
  body {
    background: #111;
    color: #eee;
  }
}

Conclusion

Modern CSS makes responsive design easier than ever. Experiment with these tricks in your next project!