Responsive tasarımda öğrendiğimiz md:, lg: gibi breakpointler her zaman ekran genişliğine (Viewport) bakar. Ancak modern web tasarımında bu bazen yetersiz kalır.
Senaryo: Bir "Ürün Kartı" tasarladınız.
- Bu kart ana içerik alanında (geniş alan) yan yana durmalı.
- Ama aynı kart yan menüde (dar alan) alt alta durmalı.
Ekran genişliği aynı olsa bile (masaüstü), kartın durduğu yerin genişliği farklıdır. İşte burada Media Queries çaresiz kalır ve devreye Container Queries girer.
Tailwind CSS Öğrenmek İster misin?
Projelerinizi hızlandırmak için Tailwind CSS Kursuma hemen göz atın.
1. Yapı Nasıl Kurulur?
Tailwind v4.0 ile Container Queries kullanmak çok basittir. İki adımı vardır:
** Kapsayıcıyı İşaretle (@container): Önce, genişliğini referans alacağımız dış kutuya (baba elemente) "Sen bir containersın" demeliyiz.
- Sınıf: @container
** Çocuğu Şekillendir (@sm:, @md:): İçteki elemente "Ekran boyutuna bakma, babanın boyutuna bak" diyerek stil veririz.
- Dikkat: Normal responsive sınıflarda md: kullanılırken, burada başında @ işareti vardır: @md:, @lg:...
2. Pratik Örnek: Akıllı Kart Tasarımı
Aşağıdaki örnekte aynı kart bileşenini iki farklı genişlikteki kutuya koyacağız. Kod aynı olmasına rağmen, dar kutuda farklı, geniş kutuda farklı görünecek.
<div class="w-64 p-4 border border-gray-300">
<p class="text-xs text-gray-500 mb-2">Dar Alan (Sidebar)</p>
<div class="@container">
<div class="flex flex-col @sm:flex-row gap-4 bg-blue-100 p-4 rounded">
<div class="w-12 h-12 bg-blue-500 rounded-full shrink-0"></div>
<div>
<h3 class="font-bold">Ürün Başlığı</h3>
<p class="text-sm">Bu kart dar alanda olduğu için dikey duruyor.</p>
</div>
</div>
</div>
</div>
<br>
<div class="w-full p-4 border border-gray-300">
<p class="text-xs text-gray-500 mb-2">Geniş Alan (Main Content)</p>
<div class="@container">
<div class="flex flex-col @sm:flex-row gap-4 bg-green-100 p-4 rounded">
<div class="w-12 h-12 bg-green-500 rounded-full shrink-0"></div>
<div>
<h3 class="font-bold">Ürün Başlığı</h3>
<p class="text-sm">Bu kart geniş alanda olduğu için YATAY duruyor.</p>
</div>
</div>
</div>
</div>
Sonuç:
- İlk kutuda (w-64), container genişliği @sm (384px) değerinden küçük olduğu için kart dikey (flex-col) kalır.
- İkinci kutuda (w-full), container genişliği @sm değerinden büyük olduğu için kart otomatik olarak yatay (flex-row) hale geçer.
3. Container Boyutları (Breakpoints)
Tailwind v4.0'da container query için kullanılan varsayılan ölçüler şunlardır:
- @xs: 20rem (320px)
- @sm: 24rem (384px)
- @md: 28rem (448px)
- @lg: 32rem (512px)
- @xl: 36rem (576px)
- @2xl: 42rem (672px)
Kullanımı: class="@lg:text-xl" (Eğer kapsayıcım LG boyutundaysa, yazımı büyüt).
4. İsimlendirilmiş Containerlar (Advanced)
Eğer iç içe birden fazla @container varsa, hangisine göre şekil alacağını belirtmek için containerlara isim verebilirsiniz.
<div class="@container/sidebar">
<div class="@md/sidebar:underline">
Menü Linki
</div>
</div>
Özet
Bu derste responsive tasarımın geleceği olan Container Queries'i öğrendik.
- Artık bir bileşeni "Mobilde şöyle, masaüstünde böyle" diye kodlamak yerine, "Dar yerde şöyle, geniş yerde böyle" diyerek çok daha akıllı hale getirebiliyoruz.
- Sihirli anahtar kelimemiz: @container ve @md: (başında @ var).
Artık Layout (Düzen) bölümümüzün en temel taşlarını bitirdik. Kapsayıcıları, responsive yapıyı ve container queries'i hallettik.