0Pricing
CSS Academy · Ders

Grid'de repeat() ve minmax()

repeat() ve minmax() kullanarak birden fazla ızgara izi oluşturun ve esnek boyut aralıkları tanımlayın.

Grid'de repeat() ve minmax(), 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.

Grid Bağlamında repeat()

repeat(count, track-size), birden çok iz tanımını tekrarlamadan oluşturan bir CSS Grid işlevidir. grid-template-columns ve grid-template-rows içinde çalışır.

Sabit Sayıyla repeat()

4 eşit sütun oluşturun:

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

Desenle repeat()

Bir iz desenini tekrarlayın:

  <div class="striped-grid">
    <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div>
  </div>

İzlerin İçinde minmax()

minmax(min, max) bir iz boyutu aralığı tanımlar:

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

minmax() ile auto-fit

Duyarlı grid tarifi:

  <div class="cards">
    <div>Card A</div><div>Card B</div>
  </div>

minmax(min-content, max-content)

İz boyutlarında içerik tabanlı boyutlandırma anahtar sözcükleri kullanılabilir:

  <div class="labels">
    <div>Label</div><div>Value</div>
  </div>

Satırlarda minmax()

İçeriğe göre belirlenen yüksekliğe minimum değerle izin vermek için satırlarda minmax() kullanın:

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

Sütunlar için fit-content()

fit-content(max), bir izi belirtilen maksimum değere kadar içeriği kadar geniş yapar — max-content gibidir, ancak üst sınırı vardır:

  <div class="layout"><div>Sidebar</div><div>Main</div></div>

repeat() ve Adlandırılmış İzleri Birleştirme

Tek tek sütunlara adlarıyla erişmek için adlandırılmış izleri tekrarlayın:

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

Sabit Öğeler için minmax ile auto-fill

Öğelerin doğal boyutlarının ötesine esnememesi gerektiğinde:

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

Grid'de fr ve Yüzdeler

Yüzdelerin aksine fr birimleri aralık alanını otomatik olarak hesaba katar. gap: 24px ile repeat(3, 1fr) gerçekten eşit 3 sütun verir. Yüzdelerde aralığı çıkarmak için calc() kullanmak gerekir.

Hızlı Kontrol

repeat(3, minmax(100px, 1fr)) ne tanımlar?

Özet

repeat(count, track), birden çok izi tekrarlamadan oluşturur. minmax(min, max), esnek iz boyutu aralıkları tanımlar. repeat(auto-fit, minmax(280px, 1fr)) deseni, en güçlü duyarlı grid çözümüdür — sıfır medya sorgusuyla sütunları otomatik olarak duyarlı hâle getirir. İçeriğe duyarlı kenar çubuğu sütunları için fit-content(max) kullanın.

Sıkça Sorulan Sorular

“Grid'de repeat() ve minmax()” dersi ücretsiz mi?

Evet — “Grid'de repeat() ve minmax()” 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.

“Grid'de repeat() ve minmax()” dersinde ne öğreneceğim?

repeat() ve minmax() kullanarak birden fazla ızgara izi oluşturun ve esnek boyut aralıkları 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 3. dersidir.

“Grid'de repeat() ve minmax()” 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

  1. Dinamik Hesaplamalar için calc()
  2. Akışkan Değerler için min(), max() ve clamp()
  3. Grid'de repeat() ve minmax()
  4. color-mix() ve Göreli Renk Sözdizimi
← CSS Academy Sayfasına Dön