minmax ile Auto-fit ve Auto-fill
minmax() ile auto-fit ve auto-fill kullanarak duyarlı sütun sayılarını otomatik olarak oluşturun.
minmax ile Auto-fit ve Auto-fill, 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.
Otomatik Duyarlı Izgara
En güçlü CSS Grid deseni şudur: auto-fit veya auto-fill ile minmax() işlevini birleştirerek, hiçbir medya sorgusu kullanmadan sütun sayısını otomatik olarak ayarlayan tamamen duyarlı bir ızgara.
auto-fill
auto-fill, verilen minimum boyutta sığabildiği kadar çok sütunla satırı doldurur. Boş sütunlar, sonunda boş ızgara izleri olarak korunur.
<div class="grid">
<div>1</div><div>2</div><div>3</div><div>4</div>
</div>auto-fit
auto-fit, auto-fill gibi çalışır ancak boş ızgara izlerini sıfır genişliğe daraltır. Mevcut öğeler kalan alanı dolduracak şekilde genişler.
<div class="grid">
<div>1</div><div>2</div><div>3</div>
</div>auto-fill ve auto-fit Arasındaki Fark
Fark yalnızca satırı doldurabilecek öğe sayısından daha az öğe olduğunda önemlidir:
auto-fill: boş sütun izleri korunur, öğeler alanı dolduracak şekilde genişlemezauto-fit: boş izler daralır, öğeler kullanılabilir genişliğin tamamını dolduracak şekilde genişler
minmax() ile auto-fit
Ünlü duyarlı ızgara deseni — öğeler en az 250px genişliğinde olur, alanı dolduracak şekilde büyür ve otomatik olarak yeni satırlara sarmalanır:
<div class="responsive-grid">
<div>Card 1</div><div>Card 2</div><div>Card 3</div>
</div>minmax() Açıklaması
minmax(min, max), bir ızgara izi boyutu aralığı tanımlar. İz, min değerinden küçük veya max değerinden büyük olmaz. fr ile birleştirildiğinde minimum değerle sınırlandırılmış esnek izler oluşturur.
<div class="track"><div>Flexible track</div></div>Sabit Öğeler için minmax ile auto-fill
Öğelerin sabit boyutta olmasını ve sonunda boş alan bırakılmasını istediğinizde:
<div class="icon-grid">
<div>🔧</div><div>⚙</div><div>🔨</div>
</div>Medya Sorguları Olmadan Duyarlılık
Temel yarar budur: repeat(auto-fit, minmax(280px, 1fr)), mobilde tek sütundan daha büyük ekranlarda sığabilecek kadar çok sütuna otomatik olarak uyum sağlar:
<div class="cards">
<div>Card A</div><div>Card B</div>
</div>Daha Güvenli minmax için min()
Minimum değer olarak ham bir piksel değeri yerine min(100%, 280px) kullanarak küçük kapsayıcılardaki düzen sorunlarını önleyin:
<div class="grid"><div>Item</div></div>Duvar Örgüsü Benzeri Hizalama için auto-fill
auto-fill ile öğe sayısı sütunların katı olmadığında sondaki boş izler hizalamayı korur — bu, tutarlı ızgaralar için kullanışlıdır.
Izgaranın İçsel Boyutlandırması ve Flexbox
Flexbox'taki flex-wrap + flex: 1 1 250px benzer olsa da eşit sütun genişliklerini garanti etmez; öğeler eşit olmayan biçimde genişleyebilir. minmax kullanan ızgara ise tamamen eşit izleri garanti eder.
Hızlı Kontrol
Boş izleri daraltarak öğelerin kullanılabilir alanı doldurmasını sağlayan ve medya sorguları olmadan duyarlı sütunlar oluşturan ızgara değeri hangisidir?
Özet
repeat(auto-fit, minmax(250px, 1fr)), en güçlü tek duyarlı ızgara desenidir; medya sorgularına hiç gerek yoktur. auto-fit, öğelerin satırı doldurması için boş izleri daraltır. auto-fill, tutarlı hizalama için boş izleri korur. Aralıklar için her zaman gap ile birlikte kullanın.
Yapay zeka eğitmeniyle CSS öğren — ücretsiz
Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.
- Kurslar
- 40
- Dersler
- 159
Sıkça Sorulan Sorular
“minmax ile Auto-fit ve Auto-fill” dersi ücretsiz mi?
Evet — “minmax ile Auto-fit ve Auto-fill” 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.
“minmax ile Auto-fit ve Auto-fill” dersinde ne öğreneceğim?
minmax() ile auto-fit ve auto-fill kullanarak duyarlı sütun sayılarını otomatik olarak oluşturun. 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.
“minmax ile Auto-fit ve Auto-fill” 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
- Adlandırılmış Satırlar ve Adlandırılmış Izgara Alanları
- minmax ile Auto-fit ve Auto-fill
- Örtük Izgara ve Grid-Auto-Flow
- Hizalanmış İç İçe İçerik için Subgrid