Modern CSS3, Flexbox, Grid & Responsive Tasarım

Flexbox: tek eksende hizalama

.menu { display: flex; gap: 1rem; align-items: center; justify-content: space-between; }

Satır ya da sütun boyunca öğeleri dizmek için idealdir: menüler, düğme grupları, kart başlıkları.

Grid: iki eksenli düzen

.kartlar { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

auto-fill + minmax ile medya sorgusu yazmadan otomatik duyarlı ızgara elde edersiniz.

Mobil öncelikli düşünün

Önce küçük ekranı tasarlayın, sonra genişledikçe ekleyin:

<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">…</div>

Tailwind'de sm:, md:, lg: önekleri "bu genişlikten itibaren" demektir. Bootstrap'te aynı iş col-12 col-md-6 col-lg-4 sınıflarıyla yapılır.

Sık yapılan hatalar

• Sabit width: 1200px yerine max-width + yüzde kullanın.
• Metni taşan kapsayıcılarda Grid öğesine min-width: 0 verin.
• Dokunmatik hedefler en az 44×44 px olsun.