Display Grid ve Şablon Sütunları ile Satırları
CSS Grid'i etkinleştirin ve grid-template-columns ile satırları kullanarak sütun ve satır izlerini tanımlayın.
Display Grid ve Şablon Sütunları ile Satırları, 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.
CSS Izgarasını Etkinleştirme
CSS Grid, bir kapsayıcıda display: grid kullanılarak etkinleştirilir. Doğrudan alt öğeleri otomatik olarak hücrelere yerleştirilen ızgara öğeleri olur.
<div class="layout">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">Item A</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">Item B</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">Item C</div>
</div>grid-template-columns
grid-template-columns, sütunların sayısını ve boyutunu belirler. Her değer bir sütun izi oluşturur.
<div class="layout">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">200px column</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>grid-template-rows
grid-template-rows, açıkça belirtilen satır izlerini tanımlar. Tanımlanan satırları aşan öğeler örtük satırlar oluşturur.
<div class="layout" style="min-height:220px;">
<div style="grid-column:span 2;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header (row: auto)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main left (row: 1fr)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main right (row: 1fr)</div>
<div style="grid-column:span 2;background:#7ee78722;border:1px solid #34c759;padding:8px;">Footer (row: auto)</div>
</div>Sütun ve Satır İzleri
grid-template-columns veya grid-template-rows içindeki her değer bir iz oluşturur. İzler herhangi bir boyut birimini kullanabilir:
- Sabit: 200px, 10rem
- Esnek: 1fr
- İçerik tabanlı: auto, min-content, max-content
fr Birimi
fr (kesir birimi), sabit boyutlar çıkarıldıktan sonra kullanılabilir alanı dağıtır. 1fr 2fr, sütunları 1:2 oranında oluşturur.
<div class="grid">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">300px fixed</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">1fr (1x share)</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">2fr (2x share)</div>
</div>İzlerde auto
Bir izdeki auto, içeriğe sığacak şekilde boyutlandırılır. Sütun olarak, en geniş hücrenin gerektirdiği minimum alanı alır; satır olarak, en uzun hücreye sığar.
<div class="sidebar-layout">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Sidebar (auto width)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main content (1fr fills the rest)</div>
</div>Sayfa Düzeni Örneği
Üst bilgi, ana içerik ve alt bilgiden oluşan yaygın üç satırlı sayfa düzeni:
<div class="page">
<header style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</header>
<main style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main (fills available space)</main>
<footer style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Footer</footer>
</div>grid-template Kısa Yazımı
grid-template, satırları ve sütunları birleştirir:
<div class="grid" style="display:grid;min-height:180px;">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main</div>
<div style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Footer</div>
</div>DevTools'ta Izgarayı İnceleme
Chrome ve Firefox DevTools, sayfanın üzerine ızgara iz çizgilerini yerleştirebilir. Sütunları, satırları, boşlukları ve adlandırılmış alanları görselleştirmek için Elements panelindeki ızgara rozetine tıklayın.
Izgara ile Flexbox Arasında Seçim
Hem satırları hem de sütunları aynı anda denetlemeniz gerektiğinde Grid kullanın. Tek boyutlu düzenler için (öğe satırı veya öğe sütunu) Flexbox kullanın. Birçok düzende ikisi birlikte kullanılır.
Çizgi Numaraları
Izgara, çizgilerini otomatik olarak 1'den başlayarak numaralandırır. Öğeleri elle yerleştirmek için bu numaralara başvurabilirsiniz. Sütun çizgileri, n sütun sayısı olmak üzere 1 ile n+1 arasında numaralandırılır.
<div style="display:grid;grid-template-columns:repeat(3, 1fr);gap:8px;">
<div class="header" style="grid-column:1 / -1;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header — spans all columns (grid-column: 1 / -1)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Item 2</div>
<div style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Item 3</div>
</div>Hızlı Kontrol
grid-template-columns: 200px 1fr 2fr ne oluşturur?
Özet
display: grid, bir ızgara kapsayıcısı oluşturur. grid-template-columns ve grid-template-rows izleri tanımlar. fr birimi, kalan alanı orantılı olarak dağıtır. auto, boyutu içeriğe göre belirler. Grid, iki boyutlu düzen denetimi için idealdir.
Sıkça Sorulan Sorular
“Display Grid ve Şablon Sütunları ile Satırları” dersi ücretsiz mi?
Evet — “Display Grid ve Şablon Sütunları ile Satırları” 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.
“Display Grid ve Şablon Sütunları ile Satırları” dersinde ne öğreneceğim?
CSS Grid'i etkinleştirin ve grid-template-columns ile satırları kullanarak sütun ve satır izlerini tanımlayı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.
“Display Grid ve Şablon Sütunları ile Satırları” 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ı