CSS Grid: template-areas auto-fit minmax
Okunabilir yerleşimler için grid alanlarını adlandırın, duyarlı sütunlar için auto-fit ile minmax() kullanın ve örtük izleri denetleyin.
CSS Grid: template-areas auto-fit minmax, CoddyKit'te ücretsiz bir Frontend 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, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.
Adlandırılmış Şablon Alanları — Görsel Düzen
grid-template-areas, bölgeleri görsel bir ASCII çizimi biçiminde adlandırmanızı sağlar. Her dize bir satır, her sözcük bir hücredir. Noktalar (.) boş hücreleri temsil eder. Öğeleri grid-area: name ile atayın.
.layout {
display: grid;
grid-template-areas:
'header header'
'sidebar main'
'footer footer';
grid-template-columns: 240px 1fr;
grid-template-rows: 60px 1fr 48px;
min-height: 100vh;
}
header { grid-area: header; }
.sidebar { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }Medya Sorgularıyla Duyarlı Şablon Alanları
Mobilde kenar çubuğunu bir sütundan ana içeriğin altına taşımak için kırılma noktalarında şablon alanları düzenini değiştirin.
.layout {
grid-template-areas:
'header'
'main'
'sidebar'
'footer';
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.layout {
grid-template-areas:
'header header'
'sidebar main'
'footer footer';
grid-template-columns: 220px 1fr;
}
}auto-fit ve auto-fill Karşılaştırması
auto-fit: boş izleri daraltarak öğelerin satırı dolduracak şekilde gerilmesini sağlar. auto-fill: izler boş olsa bile ızgara yapısını korur. Duyarlı kart ızgaraları için neredeyse her zaman istediğiniz değer auto-fit'tir.
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px;
}minmax() İşlevi Ayrıntılı Olarak
minmax(min, max), en az min ve en fazla max boyutunda bir iz tanımlar. Yaygın birleşimler: minmax(0, 1fr) (tamamen esnek), minmax(200px, 1fr) (minimum boyutlu duyarlı düzen), minmax(auto, auto) (içeriğe göre boyutlandırılır).
Sütunları ve Satırları Birleştirme
Bir öğenin iki sütuna yayılmasını sağlamak için grid-column: span 2 kullanın. Izgarada 2×2 blok kaplayan öne çıkarılmış bir öğe için bunu grid-row: span 2 ile birleştirin.
.featured {
grid-column: span 2;
grid-row: span 2;
}
/* Or explicit placement: */
.featured {
grid-column: 1 / 3; /* from line 1 to line 3 */
grid-row: 1 / 3;
}Yoğun Otomatik Yerleştirme
grid-auto-flow: dense, boş aralıkları daha küçük öğelerle geriye doğru doldurur. Öğelerin farklı boyutlara sahip olduğu mozaik benzeri düzenler için kullanışlıdır.
.mosaic {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-flow: dense;
gap: 8px;
}Kesirli Birimler ve Yüzdeler
fr birimi, sabit boyutlu izler ve aralıklar çıkarıldıktan sonra kalan kullanılabilir alanı ifade eder. fr birimini sabit boyutlarla birleştirmek en yüksek esnekliği sağlar: sabit kenar çubuğu, esnek ana içerik.
Otomatik Izgara Sütunları ve Satırları
Bunlar, örtük olarak oluşturulan izlerin boyutunu denetler (öğeler açıkça tanımlanan ızgaranın dışına yerleştirildiğinde). grid-auto-rows: minmax(100px, auto), örtük satırlara minimum yükseklik verir.
.photo-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(200px, auto);
gap: 8px;
}DevTools'ta Izgarayı İnceleme
Elements panelindeki bir ızgara kapsayıcısının yanındaki 'grid' rozetine tıkladığınızda Chrome DevTools, sayfanın üzerine ızgara çizgilerini ve alan adlarını yerleştirir. Beklenmeyen iz boyutlarını ve öğe yerleşimini hata ayıklamak için kullanın.
CSS Alt Izgarası
grid-template-columns: subgrid, iç içe bir ızgaranın üst ızgaranın izleriyle hizalanmasını sağlar. 2023'ten beri tüm modern tarayıcılarda desteklenir — kart ızgarasındaki kart içeriğini hizalamak için zorunludur.
.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.card {
display: grid;
grid-row: span 3;
grid-template-rows: subgrid; /* aligns to parent rows */
}Izgara Ne Zaman Esnek Düzeni Geçer
Hem satırların hem de sütunların önemli olduğu ve açıkça tanımlanmış iki boyutlu denetime ihtiyaç duyduğunuzda ızgara kazanır. Öğeleri yalnızca bir satırda veya yığın halinde düzenlemek istiyorsanız esnek düzen daha basittir.
Hızlı Kontrol
Minimum 200 piksel sığacak kadar çok sütun oluşturan ve her sütunun kalan alanı eşit paylaşmasını sağlayan CSS Izgarası değeri hangisidir?
Özet: Gelişmiş CSS Izgarası
grid-template-areas, okunabilir adlandırılmış düzenler oluşturur. auto-fit + minmax, medya sorguları olmadan duyarlı ızgaralar oluşturur. Öğeleri sütunlar ve satırlar boyunca birleştirin. Yoğun otomatik akış boşlukları doldurur. Hata ayıklamak için DevTools ızgara kaplamasını kullanın. Subgrid, iç içe öğeleri üst ızgaranın izleriyle hizalar.
Sıkça Sorulan Sorular
“CSS Grid: template-areas auto-fit minmax” dersi ücretsiz mi?
Evet — “CSS Grid: template-areas auto-fit minmax” 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 Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.
“CSS Grid: template-areas auto-fit minmax” dersinde ne öğreneceğim?
Okunabilir yerleşimler için grid alanlarını adlandırın, duyarlı sütunlar için auto-fit ile minmax() kullanın ve örtük izleri denetleyin. Frontend 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.
Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Frontend 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.
“CSS Grid: template-areas auto-fit minmax” 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 Frontend Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Frontend 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
- Flexbox'a Derinlemesine Bakış: Hizalama, Kaydırma, Sıralama
- CSS Grid: template-areas auto-fit minmax
- Flexbox ve Grid'i Birlikte Kullanma
- Tema Oluşturmak için CSS Değişkenleri