Mobile‑First Responsive CSS

What is Mobile‑First?

Mobile‑first design starts with styles for the smallest screens and progressively adds more complex layouts for larger viewports using media queries. This approach ensures a solid core experience on mobile devices.

Basic Setup

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">

Example: Responsive Card Grid

.grid{
  display:grid;
  gap:1rem;
}
@media(min-width:600px){
  .grid{
    grid-template-columns:repeat(2,1fr);
  }
}
@media(min-width:900px){
  .grid{
    grid-template-columns:repeat(3,1fr);
  }
}

Testing Responsiveness

Resize the browser window or use device emulation tools. The grid will adapt from a single column on small screens to three columns on large screens.