Izgara Şablonu Alanları
Okunabilir ve anlamsal düzenler için grid-template-areas ile ızgaranın alanlarını adlandırın.
Izgara Şablonu Alanları, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 4. 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.
Adlandırılmış Izgara Alanları
grid-template-areas, ASCII çizimi kullanarak ızgara bölgelerine ad vermenizi sağlar. Düzenleri oldukça okunabilir ve bakımı kolay hâle getirir.
Şablon Alanlarını Tanımlama
Tırnak içine alınan her dize bir satırı temsil eder. Aynı ada sahip hücreler dikdörtgen bir alan oluşturur. Boş hücreler için . kullanın.
<div class="page" style="min-height:240px;">
<header style="grid-area:header;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</header>
<aside style="grid-area:sidebar;background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Sidebar</aside>
<main style="grid-area:main;background:#7ee78722;border:1px solid #34c759;padding:8px;">Main</main>
<footer style="grid-area:footer;background:#ff6b6b22;border:1px solid #ff6b6b;padding:8px;">Footer</footer>
</div>Öğeleri Ada Göre Yerleştirme
Izgara öğelerini, alan adıyla (tırnak işareti olmadan) birlikte grid-area özelliğini kullanarak adlandırılmış alanlara atayın:
<div style="display:grid;grid-template-columns:200px 1fr;grid-template-rows:auto 1fr auto;grid-template-areas:'header header' 'sidebar main' 'footer footer';min-height:220px;gap:4px;">
<header style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</header>
<div class="sidebar" style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Sidebar</div>
<main style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Main</main>
<footer style="background:#ff6b6b22;border:1px solid #ff6b6b;padding:8px;">Footer</footer>
</div>Şablon Alanları İçin Kurallar
Adlandırılmış alanlar dikdörtgen olmalıdır. Her hücre yalnızca bir alanın parçası olabilir. Bir alan adı, bağlantısız hücrelerde kullanılamaz; bu geçersiz olur.
. ile Boş Hücreler
grid-template-areas içinde boş hücreleri işaretlemek için bir veya daha fazla nokta kullanın:
<div class="layout" style="display:grid;min-height:200px;">
<div style="grid-area:logo;background:#4f8cff22;border:1px solid #4f8cff;">Logo</div>
<div style="grid-area:nav;background:#ffb84d22;border:1px solid #ffb84d;">Nav</div>
<div style="grid-area:main;background:#7ee78722;border:1px solid #34c759;">Main</div>
<div style="grid-area:sidebar;background:#b57bff22;border:1px solid #b57bff;">Sidebar</div>
<div style="grid-area:footer;background:#ff6b6b22;border:1px solid #ff6b6b;">Footer</div>
</div>Medya Sorgularıyla Duyarlı Alanlar
Düzen yapısını tamamen yeniden şekillendirmek için grid-template-areas özelliğini medya sorgularında yeniden tanımlayın:
<p style="font-size:0.85em;color:#888;margin:0 0 8px;">Narrow (default) preview below. Widen your browser to ≥768px to see the media query apply the two-column layout live.</p>
<div class="page" style="min-height:200px;margin-bottom:16px;">
<div style="grid-area:header;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</div>
<div style="grid-area:main;background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main</div>
<div style="grid-area:sidebar;background:#7ee78722;border:1px solid #34c759;padding:8px;">Sidebar</div>
<div style="grid-area:footer;background:#ff6b6b22;border:1px solid #ff6b6b;padding:8px;">Footer</div>
</div>
<p style="font-size:0.85em;color:#888;margin:0 0 8px;">Preview of the ≥768px layout (static reference — not driven by the media query):</p>
<div style="display:grid;grid-template-columns:200px 1fr;grid-template-areas:'header header' 'sidebar main' 'footer footer';gap:4px;min-height:160px;">
<div style="grid-area:header;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</div>
<div style="grid-area:sidebar;background:#7ee78722;border:1px solid #34c759;padding:8px;">Sidebar</div>
<div style="grid-area:main;background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main</div>
<div style="grid-area:footer;background:#ff6b6b22;border:1px solid #ff6b6b;padding:8px;">Footer</div>
</div>Oluşturulan Adlandırılmış Çizgiler
Bir alana ad verdiğinizde CSS, hem satırlar hem de sütunlar için otomatik olarak adlandırılmış ızgara çizgileri oluşturur: area-start ve area-end.
<div style="display:grid;grid-template-columns:200px 1fr;grid-template-rows:auto 1fr;grid-template-areas:'aside main' 'aside main';gap:0;min-height:160px;">
<div style="grid-area:aside;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Aside</div>
<div style="grid-area:main;background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main content</div>
<div class="overlay" style="grid-row:1/3;background:rgba(255,99,71,0.3);border:2px dashed tomato;padding:4px;">Overlay via named lines main-start / main-end</div>
</div>Alanları ve Çizgi Numaralarını Birleştirme
Adlandırılmış alanlar ve açık çizgi numaraları aynı ızgarada birlikte bulunabilir. Öğeler ada, çizgiye veya kaplanacak iz sayısına göre yerleştirilebilir.
Görsel Izgara Tasarımı İş Akışı
Yaygın bir iş akışı şöyledir: önce düzeni şablon alanlarında taslak olarak oluşturun, ardından sütun ve satır boyutlarını tanımlayın. Böylece yapı ile boyutlandırma birbirinden ayrılır.
<div class="dashboard" style="display:grid;">
<div style="grid-area:header;background:#4f8cff22;border:1px solid #4f8cff;">Header</div>
<div style="grid-area:nav;background:#ffb84d22;border:1px solid #ffb84d;">Nav</div>
<div style="grid-area:main;background:#7ee78722;border:1px solid #34c759;">Main</div>
<div style="grid-area:ads;background:#b57bff22;border:1px solid #b57bff;">Ads</div>
<div style="grid-area:footer;background:#ff6b6b22;border:1px solid #ff6b6b;">Footer</div>
</div>Şablon Alanları ve Erişilebilirlik
Izgaranın görsel sırası, DOM kaynak sırasından farklı olabilir. Ekran okuyucuları görsel yerleşimi değil, DOM sırasını izler. Öğeler ızgara yerleşimiyle görsel olarak yeniden sıralansa bile DOM sırasının mantıklı olduğundan emin olun.
grid-template Kısa Yazımı
grid-template-areas, grid-template-columns ve grid-template-rows özelliklerini tek bir grid-template tanımında birleştirin.
<div class="page" style="display:grid;min-height:200px;">
<div style="grid-area:header;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</div>
<div style="grid-area:sidebar;background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Sidebar</div>
<div style="grid-area:main;background:#7ee78722;border:1px solid #34c759;padding:8px;">Main</div>
<div style="grid-area:footer;background:#ff6b6b22;border:1px solid #ff6b6b;padding:8px;">Footer</div>
</div>Hızlı Kontrol
grid-template-areas içinde boş bir hücreyi işaretlemek için hangi karakter kullanılır?
Özet
grid-template-areas, düzen bölgelerine ad vermek için ASCII çizimi kullanır. Öğeler grid-area: name ile yerleştirilir. Alanlar dikdörtgen olmalıdır ve boş hücrelerde . kullanılır. Temiz ve okunabilir CSS ile tamamen duyarlı düzenler oluşturmak için alanları medya sorgularında yeniden tanımlayın.
Sıkça Sorulan Sorular
“Izgara Şablonu Alanları” dersi ücretsiz mi?
Evet — “Izgara Şablonu Alanları” 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.
“Izgara Şablonu Alanları” dersinde ne öğreneceğim?
Okunabilir ve anlamsal düzenler için grid-template-areas ile ızgaranın alanlarını adlandırı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 4. dersidir.
“Izgara Şablonu Alanları” 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ı