fr Birimi ve Repeat
Esnek ızgara izleri oluşturmak için kesirli fr birimini ve repeat() işlevini kullanın.
fr Birimi ve Repeat, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.
fr Birimi Nedir?
fr (kesir) birimi yalnızca CSS Grid'e özgüdür. Izgara kapsayıcısındaki tüm esnek olmayan izlerin boyutu belirlendikten sonra kalan boş alanın bir kesrini temsil eder.
Basit fr Örneği
Kullanılabilir alanın yarısını alan iki eşit sütun:
<div class="grid">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">Column 1 (1fr)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">Column 2 (1fr)</div>
</div>Karışık İzler
fr alanı, sabit izler çıkarıldıktan sonra hesaplanır:
<div class="layout">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">200px sidebar</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">1fr column</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">1fr column</div>
</div>Eşit Olmayan Kesirler
Farklı fr değerleri, orantılı sütunlar oluşturur:
<div class="thirds" style="display:grid;">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">25% (1fr)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">50% (2fr)</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">25% (1fr)</div>
</div>repeat() İşlevi
repeat(), aynı iz boyutunu tekrar tekrar yazma gereğini ortadan kaldırır. İlk bağımsız değişken tekrar sayısını, ikincisi ise iz boyutunu belirtir.
<div class="grid" style="display:grid;">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">1</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">2</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">3</div>
<div style="background:#ff6b6b22;border:1px solid #ff6b6b;padding:12px;border-radius:4px;">4</div>
</div>Karışık İzlerle repeat()
Bir iz desenini tekrarlayabilirsiniz:
<div class="grid" style="display:grid;">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">1fr</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">2fr</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">1fr</div>
<div style="background:#ff6b6b22;border:1px solid #ff6b6b;padding:12px;border-radius:4px;">2fr</div>
<div style="background:#b57bff22;border:1px solid #b57bff;padding:12px;border-radius:4px;">1fr</div>
<div style="background:#3fd0c922;border:1px solid #3fd0c9;padding:12px;border-radius:4px;">2fr</div>
</div>auto-fill
repeat(auto-fill, ...), belirtilen boyutta kapsayıcıya sığan kadar sütun oluşturur. Boş izler sonda korunur.
<div class="grid" style="display:grid;">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">200px</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">200px</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">200px</div>
</div>auto-fit
repeat(auto-fit, ...), auto-fill gibi çalışır; ancak boş izleri daraltarak mevcut öğelerin kapsayıcıyı dolduracak şekilde genişlemesine olanak tanır.
<div class="grid" style="display:grid;">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">min 200px, grows</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">min 200px, grows</div>
</div>repeat İçinde minmax()
minmax(min, max), bir iz boyutu aralığı tanımlar. auto-fit ile birleştirildiğinde medya sorguları olmadan duyarlı bir ızgara oluşturur:
<div class="responsive-grid">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">Card A</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">Card B</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">Card C</div>
</div>fr ile Yüzde Karşılaştırması
Yüzdelerin aksine fr, boşluk alanını otomatik olarak hesaba katmaz. 24px boşluklu 1fr 1fr, herhangi bir matematik işlemi gerektirmeden iki eşit sütun oluşturur. Buna denk yüzde hesabı calc(50% - 12px) olur.
min-content ve max-content ile fr
Karışık düzenler için fr birimini içeriğe dayalı boyutlandırmayla birleştirin:
<div class="grid" style="display:grid;">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Label</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Flexible content area</div>
<div style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Action</div>
</div>Hızlı Kontrol
repeat(auto-fit, minmax(200px, 1fr)) ne oluşturur?
Özet
fr birimi, kalan ızgara alanını orantılı olarak dağıtır. repeat(), tekrarlanan iz tanımlarını önler. Güçlü repeat(auto-fit, minmax(250px, 1fr)) deseni, medya sorgularına gerek kalmadan tamamen duyarlı kart ızgaraları oluşturur.
Sıkça Sorulan Sorular
“fr Birimi ve Repeat” dersi ücretsiz mi?
Evet — “fr Birimi ve Repeat” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.
“fr Birimi ve Repeat” dersinde ne öğreneceğim?
Esnek ızgara izleri oluşturmak için kesirli fr birimini ve repeat() işlevini kullanın. CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
CSS Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.
“fr Birimi ve Repeat” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu CSS Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Display Grid ve Şablon Sütunları ile Satırları
- fr Birimi ve Repeat
- Boşluk ve Izgara Yerleşimi
- Izgara Şablonu Alanları