Responsive Design

Responsive Design with Media Queries

Media queries apply CSS only when certain conditions are met:

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

@media (max-width: 640px) {
  .nav { display: none; }
}

Mobile-first approach — start with mobile styles, then add larger screens:

/* Mobile (default) */
.grid { grid-template-columns: 1fr; }

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

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

Common breakpoints:

• 640px — small phones
• 768px — tablets
• 1024px — laptops
• 1280px — desktops

Relative units:

• em / rem — scales with font size
• % — relative to parent
• vw / vh — viewport width/height

Your Task

Create a responsive grid layout that shows 1 column on mobile, 2 on tablet (768px+), and 3 on desktop (1024px+).