Mobile-first tasarım ve media query'ler nasıl kullanılır?

Mobile-first, temel stillerin en küçük ekran için yazılması, daha büyük ekranlar için min-width media query'leriyle eklemeler yapılmasıdır. Mobil cihaz gereksiz stil yüklemez ve CSS daha sade kalır.

.kartlar { display: grid; gap: 16px; grid-template-columns: 1fr; }

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

/* Çoğu zaman media query'siz de mümkün */
.kartlar { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

Modern CSS'te container query (@container) ile bileşenler ekran yerine kendi kapsayıcılarının genişliğine göre de uyarlanabilir.