CSS Academy · Ders

Örtük Izgara ve Grid-Auto-Flow

CSS Grid'in açıkça tanımlanmış izlerin ötesindeki ögeleri örtük satır ve sütunlarla nasıl yönettiğini anlayın.

Örtük Izgara ve Grid-Auto-Flow, 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.

Açık ve Örtük Izgara

Açık ızgara, grid-template-columns ve grid-template-rows tarafından tanımlanır. Öğeler bu tanımlı izlerin dışına taştığında tarayıcı otomatik olarak örtük izler oluşturur.

grid-auto-rows

Örtük olarak oluşturulan satır izlerinin boyutunu tanımlar. Bu özellik olmadan örtük satırlar, içeriklerine sığacak şekilde (auto) boyutlandırılır.

  <div class="gallery">
    <div>1</div><div>2</div><div>3</div><div>4</div>
  </div>

minmax ile grid-auto-rows

Örtük satırları en az belirli bir yükseklikte olacak, ancak genişleyebilecek şekilde ayarlayın:

  <div class="feed">
    <div>1</div><div>2</div><div>3</div>
  </div>

grid-auto-columns

Öğeler açık sütun aralığının dışına yerleştirildiğinde örtük sütun izlerinin boyutlarını tanımlar:

  <div class="timeline">
    <div>Event 1</div><div>Event 2</div>
  </div>

grid-auto-flow

Otomatik yerleştirme algoritmasının öğeleri nasıl yerleştireceğini denetler:

row (varsayılan) — satırlara yerleştirir, gerektiğinde yeni satırlar ekler
column — sütunlara yerleştirir, yeni sütunlar ekler
row dense — geriye dönerek boşlukları agresif biçimde doldurur
column dense — sütun yönünde yoğun doldurma yapar

grid-auto-flow: dense

dense, algoritmanın geniş alan kaplayan öğelerin bıraktığı boşlukları doldurmaya çalışmasını sağlar. Bu, öğelerin sıra dışı görünmesine neden olabilir.

  <div class="masonry">
    <div class="featured">Featured</div><div>2</div><div>3</div><div>4</div>
  </div>

Sütunlu Otomatik Akış Deseni

Sütunların gerektiğinde büyüdüğü yatay kaydırmalı kart şeridi:

  <div class="strip">
    <div>Card 1</div><div>Card 2</div><div>Card 3</div>
  </div>

Galeri için Yoğun Doldurma

Boşlukları dolduran, farklı boyutlarda görsellerden oluşan bir fotoğraf galerisi:

  <div class="gallery">
    <div class="wide">Wide</div>
    <div class="tall">Tall</div>
    <div>3</div><div>4</div>
  </div>

Örtük Izgara ve Adlandırılmış Alanlar

Adlandırılmış alanlar yalnızca açık ızgaraya uygulanır. Örtük ızgaraya yerleştirilen öğeler adlandırılmış alan yerleştirmesini doğrudan kullanamaz; bunlar için çizgi numarası veya span yerleştirmesi gerekir.

Örtük Izgarayı Görselleştirme

Chrome DevTools'ta düzen katmanı hem açık (düz) hem de örtük (kesikli) ızgara çizgilerini gösterir. Bu, otomatik olarak yerleştirilen öğelerin nereye geldiğini anlamanıza yardımcı olur.

Öğe Başına Örtük Boyutu Denetleme

Örtük ızgarada birden çok satıra yayılan öğelerin doğru boyutlandırılması için grid-auto-rows gerekir. Bu özellik olmadan örtük satırlar içeriğe göre boyutlandırılır ve bu da düzensiz düzenler oluşturabilir.

Hızlı Kontrol

grid-auto-flow: row dense ne yapar?

Özet

Örtük ızgara, otomatik olarak oluşturulan izlerle açık ızgarayı genişletir. grid-auto-rows/columns bu izlerin boyutunu denetler; minmax() onları esnek hâle getirir. grid-auto-flow yerleştirme yönünü belirler. dense doldurması boşlukları agresif biçimde kapatır; duvar örgüsü tarzı düzenler için kullanışlı olsa da görsel sırayı bozabilir.

Sıkça Sorulan Sorular

“Örtük Izgara ve Grid-Auto-Flow” dersi ücretsiz mi?

Evet — “Örtük Izgara ve Grid-Auto-Flow” 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.

“Örtük Izgara ve Grid-Auto-Flow” dersinde ne öğreneceğim?

CSS Grid'in açıkça tanımlanmış izlerin ötesindeki ögeleri örtük satır ve sütunlarla nasıl yönettiğini anlayı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 3. dersidir.

“Örtük Izgara ve Grid-Auto-Flow” 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

← CSS Academy Sayfasına Dön