What does mobile-first mean in CSS?

The base stylesheet targets the constrained case. Larger screens add columns, spacing and richer layout. This keeps the default CSS small and makes the narrow layout the starting point rather than an afterthought.

.cards {
  display: grid;
  gap: 1rem;
}

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

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

Why it helps

• The smallest layout is the default, so it cannot be forgotten
• Enhancements are additive and easier to reason about
• Older mobile devices get less CSS and fewer large assets
• It pairs naturally with progressive enhancement and content-first design

Desktop-first with max-width queries is still valid, especially when maintaining an existing desktop product. The important part is that both layouts are intentionally designed, not that one methodology is mandatory.