CSS — Responsive Design

Overview

Responsive design adapts layout to different screen sizes.

What you'll learn

• fluid widths
• media queries
• responsive images
• mobile-first

Syntax

@media (max-width: 768px){ ... }

Example

.container{ max-width:1200px; margin:0 auto; padding:16px; }
.grid{ display:grid; gap:12px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 768px){
  .grid{ grid-template-columns: 1fr; }
}

Notes

• Start mobile-first when possible.
• Use flexible units (%, rem).

  Try: Open the Playground: /en/playground/html