Boşluk ve Izgara Yerleşimi
gap ile ızgara hücreleri arasına boşluk ekleyin ve grid-column ile grid-row kullanarak öğeleri yerleştirin.
Boşluk ve Izgara Yerleşimi, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 3. 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 Grid'de Boşluk
gap özelliği, ızgara satırları ve sütunları arasındaki alanı belirler. Eski grid-gap özelliğinin yerini alır ve Flexbox'ta da çalışır.
<div class="grid">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">1</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">2</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">3</div>
<div style="background:#ff6b6b22;border:1px solid #ff6b6b;padding:12px;border-radius:4px;">4</div>
<div style="background:#b57bff22;border:1px solid #b57bff;padding:12px;border-radius:4px;">5</div>
<div style="background:#3fd0c922;border:1px solid #3fd0c9;padding:12px;border-radius:4px;">6</div>
</div>row-gap ve column-gap
Satır ve sütun boşluklarını birbirinden bağımsız olarak belirleyin:
<div class="grid" style="display:grid;grid-template-columns:repeat(3, 1fr);">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">1</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">2</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">3</div>
<div style="background:#ff6b6b22;border:1px solid #ff6b6b;padding:12px;border-radius:4px;">4</div>
<div style="background:#b57bff22;border:1px solid #b57bff;padding:12px;border-radius:4px;">5</div>
<div style="background:#3fd0c922;border:1px solid #3fd0c9;padding:12px;border-radius:4px;">6</div>
</div>Izgara Çizgisi Numaraları
CSS Grid, çizgilerini 1'den başlayarak numaralandırır. Üç sütunlu bir ızgarada sütun çizgileri 1, 2, 3 ve 4'tür. Negatif numaralar sondan sayar: -1 son çizgidir, -2 sondan ikinci çizgidir.
grid-column ve grid-row
grid-column ve grid-row ile çizgi numaralarını kullanarak öğeleri elle yerleştirin:
<div style="display:grid;grid-template-columns:repeat(3, 1fr);grid-auto-rows:60px;gap:8px;">
<div class="header" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header (spans all 3 columns, row 1)</div>
<div class="main" style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main (spans 2 columns, row 2)</div>
</div>span Anahtar Sözcüğü
Bir öğenin kaplaması gereken iz sayısını mutlak çizgi numaraları yerine belirtmek için span kullanın:
<div style="display:grid;grid-template-columns:repeat(4, 60px);grid-auto-rows:60px;gap:8px;">
<div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
<div class="featured" style="background:#4f8cff22;border:1px solid #4f8cff;padding:4px;">Featured (span 2x2)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
</div>Negatif Çizgi Numaraları
Negatif dizinler sondan sayar. Sütun sayısından bağımsız olarak 1 / -1 her zaman ızgaranın tamamını kaplar:
<div style="display:grid;grid-template-columns:repeat(3, 1fr);gap:8px;">
<div class="full-width" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Full width (grid-column: 1 / -1)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Item</div>
<div style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Item</div>
</div>grid-area Kısa Yazımı
grid-area, dört ızgara yerleştirme değerinin tümünü tek bir özellikte belirler: row-start / column-start / row-end / column-end.
<div style="display:grid;grid-template-columns:repeat(3, 1fr);grid-auto-rows:60px;gap:0;">
<div class="hero" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Hero (row 1 start, col 1 start, row 2 end, last column)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
</div>Otomatik Yerleştirme
Açıkça yerleştirilmeyen öğeler, grid-auto-flow algoritmasını izleyerek sonraki kullanılabilir hücreye otomatik olarak yerleştirilir. Tarayıcı, varsayılan olarak hücreleri soldan sağa ve yukarıdan aşağıya doldurur.
Grid'de justify-items ve align-items
Bir ızgara kapsayıcısında justify-items hücre içeriğini yatay olarak, align-items ise dikey olarak hizalar. Her ikisinin varsayılan değeri stretch olur.
<div class="grid" style="min-height:120px;">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;width:fit-content;">centered, top-aligned item</div>
</div>justify-self ve align-self
Tek tek ızgara öğeleri, justify-self ve align-self kullanarak kapsayıcının hizalamasını geçersiz kılabilir:
<div style="display:grid;grid-template-columns:1fr;min-height:120px;">
<div class="featured-card" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Stretched horizontally, centered vertically</div>
</div>Üst Üste Binen Izgara Öğeleri
Birden çok öğe aynı ızgara hücresinde bulunabilir. Hangisinin üstte görüneceğini denetlemek için z-index kullanın. Böylece görsel ile üzerine yerleştirilen metin gibi katmanlı tasarımlar oluşturabilirsiniz.
<div style="display:grid;grid-template-columns:repeat(2, 1fr);grid-template-rows:repeat(2, 60px);">
<div class="image" style="background:#4f8cff44;border:1px solid #4f8cff;">Image layer</div>
<div class="caption" style="background:rgba(0,0,0,0.6);color:#fff;align-self:end;padding:4px 8px;">Caption overlay</div>
</div>Hızlı Kontrol
Bir öğede grid-column: 2 / span 3 tanımlı. Beş sütunlu bir ızgarada hangi sütunları kaplar?
Özet
gap, ızgara hücreleri arasına oluklar ekler. Öğeler, grid-column ve grid-row ile çizgi numaraları kullanılarak yerleştirilir. span anahtar sözcüğü kaç izin kaplanacağını belirtir. Tüm sütunları her zaman kaplamak için 1 / -1 kullanın. Izgara öğeleri z-index kullanılarak üst üste gelebilir.
Sıkça Sorulan Sorular
“Boşluk ve Izgara Yerleşimi” dersi ücretsiz mi?
Evet — “Boşluk ve Izgara Yerleşimi” 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.
“Boşluk ve Izgara Yerleşimi” dersinde ne öğreneceğim?
gap ile ızgara hücreleri arasına boşluk ekleyin ve grid-column ile grid-row kullanarak öğeleri yerleştirin. 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 3. dersidir.
“Boşluk ve Izgara Yerleşimi” 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ı