Responsive

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Note Without this, mobile browsers render at a desktop width and then shrink the result. Essential for every responsive site.

@media (condition) { ... }

/* Mobile-first approach */
.grid {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

Note Mobile-first (min-width) is the recommended approach: start with small screens and add complexity at wider breakpoints. Common breakpoints: 640px (small), 768px (medium), 1024px (large), 1280px (extra large).