Adlandırılmış Satırlar ve Adlandırılmış Izgara Alanları
Daha okunabilir ve sürdürülebilir ızgara yerleşimi için ızgara satırlarını ve alanlarını adlandırın.
Adlandırılmış Satırlar ve Adlandırılmış Izgara Alanları, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 1. 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.
Izgara Çizgilerini Adlandırma
Izgara çizgilerine grid-template-columns ve grid-template-rows içinde köşeli parantezlerle ad verilebilir. Adlandırılmış çizgiler, yerleştirme kodunu ham sayılardan daha okunabilir hâle getirir.
<div class="layout">
<div class="sidebar">Sidebar</div>
<div class="main">Main</div>
</div>Öğeleri Adlandırılmış Çizgilerle Yerleştirme
Okunabilir bir yerleştirme için grid-column ve grid-row içinde adlandırılmış çizgileri kullanın:
<div class="layout">
<div class="sidebar">Sidebar</div>
<div class="main">Main</div>
</div>-start ve -end ile Çizgi Adları
Adlandırılmış alanlar grid-template-areas ile tanımlandığında CSS, başvurabileceğiniz -start ve -end son eklerini taşıyan adlandırılmış çizgileri otomatik olarak oluşturur.
<div class="layout">
<div class="sidebar">Sidebar</div>
<div class="main">Main</div>
</div>Adlandırılmış Çizgileri Tekrarlama
repeat() kullanırken adları tekrarlanan desenin içine ekleyebilirsiniz. Çizgilerin birbirinden ayırt edilebilmesi için numaralı son ekler alır.
<div class="grid">
<div>1</div><div>2</div><div>3</div>
</div>Adlandırılmış Çizgileri Kapsama
Belirli sayıda adlandırılmış ızgara izini kapsamak için adlandırılmış çizgileri span ile kullanın:
<div class="grid">
<div class="header">Header spans 3</div>
<div>A</div><div>B</div><div>C</div>
</div>Adlandırılmış Alanların Özeti
Adlandırılmış alanlar (grid-template-areas aracılığıyla), öğeleri konumlandırmanın en okunabilir yaklaşımıdır:
<div class="page">
<header>Header</header>
<div class="sidebar">Sidebar</div>
<div class="main">Main</div>
<div class="footer">Footer</div>
</div>Karmaşık Düzenler için Adlandırılmış Çizgiler
Adlandırılmış çizgiler, birden çok öğenin alan kapladığı karmaşık editoryal düzenlerde özellikle kullanışlıdır:
<div class="magazine">
<div class="full-bleed">Full bleed banner</div>
<div class="article">Article content</div>
</div>Adları ve Sayıları Birleştirme
Adlandırılmış çizgiler ve çizgi numaraları aynı ızgarada serbestçe birlikte kullanılabilir:
<div class="layout"><div class="item">Item</div></div>Tek Çizgide Birden Çok Ad
Tek bir çizginin birden çok adı olabilir — bu, bir alanın sonu ve başka bir alanın başlangıcı olarak görev yapan çizgiler için kullanışlıdır:
<div class="grid">
<div>Sidebar</div>
<div>Content</div>
</div>Alanlardan Otomatik Oluşan Adlandırılmış Çizgiler
"main" adlı bir alan tanımlarsanız main-start (sütun ve satır) ve main-end çizgileri otomatik olarak oluşturulur; böylece bunları üst üste binen öğeler için kullanabilirsiniz.
DevTools'ta Adlandırılmış Çizgilerde Hata Ayıklama
Chrome ve Firefox DevTools, adlandırılmış ızgara çizgilerini katman üzerinde etiket olarak gösterebilir. Adların doğru olduğunu doğrulamak için Düzen panelinde çizgi etiketlerini etkinleştirin.
Hızlı Kontrol
grid-template-areas içinde "sidebar" adlı bir ızgara alanı tanımladığınızda hangi çizgi adları otomatik olarak oluşturulur?
Özet
Okunabilir bir yerleştirme için iz tanımlarının içindeki köşeli parantezlerde ızgara çizgilerine ad verin. Adlandırılmış alanlar otomatik olarak -start ve -end çizgi adlarını oluşturur. Tek bir çizginin birden çok adı olabilir. Adlandırılmış çizgiler, span ve sayılarla serbestçe birleştirilebilir. Adlandırılmış çizgileri katman olarak görselleştirmek için DevTools'u kullanın.
Sıkça Sorulan Sorular
“Adlandırılmış Satırlar ve Adlandırılmış Izgara Alanları” dersi ücretsiz mi?
Evet — “Adlandırılmış Satırlar ve Adlandırılmış Izgara 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.
“Adlandırılmış Satırlar ve Adlandırılmış Izgara Alanları” dersinde ne öğreneceğim?
Daha okunabilir ve sürdürülebilir ızgara yerleşimi için ızgara satırlarını ve 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 1. dersidir.
“Adlandırılmış Satırlar ve Adlandırılmış Izgara 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
- 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