Izgara Satırları ve Otomatik Yerleştirme
grid-rows-* ile açık satırlar tanımlayın, grid-flow-* ile otomatik yerleştirmeyi denetleyin ve tarayıcının öğeleri akıllıca yerleştirmesine izin verin.
Izgara Satırları ve Otomatik Yerleştirme, CoddyKit'te ücretsiz bir Tailwind 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, Tailwind CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Tailwind CSS Academy kursu toplamda 4 dersten oluşur.
Açık ve Örtük Izgara Satırları
Öğeleri bir ızgaraya yerleştirdiğinizde CSS Grid, satırları iki şekilde oluşturur: açık olarak (bunları grid-rows-* ile tanımlarsınız) veya örtük olarak (öğeler taştığında tarayıcı bunları otomatik oluşturur). Bu ayrımı anlamak, gerektiğinde yükseklikleri kesin olarak denetlemenize veya değişken içeriklerde bu işi tarayıcıya bırakmanıza yardımcı olur.
<!-- Explicit 3-row grid -->
<div class="grid grid-rows-3 grid-cols-2 gap-4 h-48">
<div class="bg-blue-100 p-3">Row 1, Col 1</div>
<div class="bg-blue-100 p-3">Row 1, Col 2</div>
<div class="bg-blue-200 p-3">Row 2, Col 1</div>
<div class="bg-blue-200 p-3">Row 2, Col 2</div>
<div class="bg-blue-300 p-3">Row 3, Col 1</div>
<div class="bg-blue-300 p-3">Row 3, Col 2</div>
</div>grid-rows-N Yardımcıları
Tailwind, açık satır izleri tanımlamak için grid-rows-1 ile grid-rows-6 arasında yardımcılar sunar. Arka planda grid-rows-3, grid-template-rows: repeat(3, minmax(0, 1fr)) ifadesine dönüştürülür. Bu satırlar, kapsayıcının kullanılabilir yüksekliğini eşit olarak paylaşır. Bu özellik, özellikle kapsayıcının sabit veya yüzde tabanlı bir yüksekliği olduğunda kullanışlıdır.
<!-- 4 equal rows in a fixed-height dashboard -->
<div class="grid grid-rows-4 gap-2 h-64">
<div class="bg-emerald-100 p-2 rounded">Section 1</div>
<div class="bg-emerald-200 p-2 rounded">Section 2</div>
<div class="bg-emerald-300 p-2 rounded">Section 3</div>
<div class="bg-emerald-400 p-2 rounded">Section 4</div>
</div>Örtük Satırlar ve grid-auto-rows
Açık satırlarınızın alabileceğinden daha fazla öğe olduğunda tarayıcı örtük satırlar oluşturur. Varsayılan olarak bu satırların boyutu, içeriklerine sığacak şekilde belirlenir. Yüksekliklerini özel CSS veya Tailwind'in rastgele değer söz dizimiyle denetleyebilirsiniz. Örneğin satır yüksekliğini satır içi stille ayarlayabilir ya da Tailwind'in daha yeni sürümlerinde bulunan auto-rows-* yardımcılarını kullanabilirsiniz.
<!-- Implicit rows kick in for items beyond grid-rows-2 -->
<div class="grid grid-cols-2 grid-rows-2 gap-3" style="grid-auto-rows: 80px">
<div class="bg-purple-100 p-3">Explicit row 1</div>
<div class="bg-purple-100 p-3">Explicit row 1</div>
<div class="bg-purple-200 p-3">Explicit row 2</div>
<div class="bg-purple-200 p-3">Explicit row 2</div>
<!-- These create implicit rows at 80px height -->
<div class="bg-purple-300 p-3">Implicit row</div>
<div class="bg-purple-300 p-3">Implicit row</div>
</div>grid-flow'u Anlama
grid-flow özelliği, otomatik konumlandırma algoritmasını, yani öğelerin kullanılabilir ızgara hücrelerini doldurma sırasını denetler. Tailwind'in varsayılanı olan grid-flow-row, aşağı geçmeden önce her satırı soldan sağa doldurur. grid-flow-col ise sağa geçmeden önce her sütunu yukarıdan aşağıya doldurur. Bu, kitap okurken soldan sağa ilerlemek ile gazeteyi sütun sütun okumak arasındaki farka benzer.
<!-- Row flow (default): items fill horizontally -->
<div class="grid grid-cols-3 grid-flow-row gap-3">
<div class="bg-sky-100 p-3">1</div>
<div class="bg-sky-100 p-3">2</div>
<div class="bg-sky-100 p-3">3</div>
<div class="bg-sky-100 p-3">4</div>
</div>Sütun Öncelikli Yerleşim İçin grid-flow-col
grid-flow-col uygulandığında otomatik konumlandırma algoritması önce sütunları dolduracak şekilde değişir. Her sütunun ne kadar büyüyebileceğini sınırlamak için bunu grid-rows-* ile birleştirdiğinizde gazete veya Pinterest tarzı dikey kart akışı oluşturabilirsiniz. Öğeler ilk sütunda aşağı doğru dolar, ardından otomatik olarak sonraki sütuna taşar.
<!-- Column-first flow: items fill downward in each column -->
<div class="grid grid-rows-3 grid-flow-col gap-3">
<div class="bg-rose-100 p-3">Col 1, Row 1</div>
<div class="bg-rose-100 p-3">Col 1, Row 2</div>
<div class="bg-rose-100 p-3">Col 1, Row 3</div>
<div class="bg-rose-200 p-3">Col 2, Row 1</div>
<div class="bg-rose-200 p-3">Col 2, Row 2</div>
<div class="bg-rose-200 p-3">Col 2, Row 3</div>
</div>Yoğun Otomatik Konumlandırma
grid-flow-dense, tarayıcının geniş yayılan öğelerin bıraktığı boşlukları doldurmasını sağlayan yoğun paketleme algoritmasını etkinleştirir. Yoğun paketleme olmadan, yayılma kullanan bir ızgara boşluk bırakır; çünkü konumlandırma kesin bir sırayı izler. Yoğun paketleme, boşa alan bırakmadan sıkı bir mozaik oluşturmak istediğiniz görsel galerileri için idealdir.
<!-- Dense packing fills holes left by spanning items -->
<div class="grid grid-cols-3 grid-flow-dense gap-3">
<div class="col-span-2 bg-amber-200 p-3">Wide (spans 2)</div>
<div class="bg-amber-100 p-3">B</div>
<div class="bg-amber-100 p-3">C</div>
<!-- D would normally go after C, but dense fills the hole before B -->
<div class="bg-amber-100 p-3">D</div>
</div>Satır ve Sütun Akışını Birlikte Yoğunlaştırma
Akış yönünü ve yoğunluğu grid-flow-row-dense veya grid-flow-col-dense ile birleştirebilirsiniz. Satır yoğun biçimi önce satırları doldurur, ancak boşlukları sonradan doldurur; sütun yoğun biçimi ise önce sütunları doldurur ve boşlukları sonradan tamamlar. Bunlar, katı sıralamadan çok görünümün önemli olduğu, farklı boyutlarda kartlara sahip galeri tarzı yerleşimler için başvurulacak yardımcılardır.
<!-- Row-dense: fills rows first, packs holes -->
<div class="grid grid-cols-4 grid-flow-row-dense gap-3">
<div class="col-span-3 bg-teal-300 p-3">Spans 3</div>
<div class="bg-teal-100 p-3">A</div>
<div class="bg-teal-100 p-3">B</div>
<div class="col-span-2 bg-teal-200 p-3">Spans 2</div>
<div class="bg-teal-100 p-3">C</div>
</div>Izgara Satırlarını Sütunlarla Birleştirme
grid-rows-* ve grid-cols-* değerlerini birlikte tanımlamak, elektronik tabloya benzer şekilde tamamen belirlenmiş bir ızgara şablonu oluşturur. Bu şablondaki her hücrenin öngörülebilir bir konumu vardır. Bu yaklaşım, tam olarak kaç bölüme ihtiyacınız olduğunu bildiğiniz ve yükseklikleriyle genişlikleri üzerinde hassas denetim istediğiniz gösterge tablosu düzenlerinde çok işe yarar.
<!-- 3-col x 2-row dashboard shell -->
<div class="grid grid-cols-3 grid-rows-2 gap-4 h-64">
<div class="col-span-3 bg-slate-700 text-white p-3 rounded">Header</div>
<div class="bg-slate-100 p-3 rounded">Widget 1</div>
<div class="bg-slate-100 p-3 rounded">Widget 2</div>
<div class="bg-slate-100 p-3 rounded">Widget 3</div>
</div>Keyfi Değerlerle Özel Satır Yükseklikleri
Tailwind'in keyfi değer söz dizimi, köşeli parantezlerin içine herhangi bir CSS değeri yazmanıza olanak tanır. Izgara satırları için, 100 piksellik sabit bir üst bilgi, esnek bir içerik alanı ve otomatik boyutlandırılan bir alt bilgi tanımlamak üzere grid-rows-[100px_1fr_auto] kullanabilirsiniz. Bu yöntem satır içi stiller yazmaktan daha kısadır ve üretim CSS'inize JIT derlemesiyle aktarılma avantajı sunar.
<!-- Custom row heights: 60px header, flexible main, auto footer -->
<div class="grid h-screen" style="grid-template-rows: 60px 1fr auto">
<header class="bg-gray-900 text-white flex items-center px-6">
App Header
</header>
<main class="bg-gray-50 p-6 overflow-y-auto">
Main scrollable content
</main>
<footer class="bg-gray-800 text-white p-4 text-center">
Footer
</footer>
</div>Otomatik Satırları Uygulamada Kullanma
Dinamik içerikli kart ızgaraları oluştururken, kısa kartların çok küçük görünmemesi için genellikle satırların tekdüze bir minimum yüksekliğe sahip olmasını istersiniz. Satır içi stil aracılığıyla veya Tailwind'in JIT keyfi çeşidi olan [grid-auto-rows:200px] ile grid-auto-rows kullanarak her satırın gerektiği kadar yüksek olmasını sağlayabilirsiniz. Bu, verilerle oluşturulan listelerde rahatsız edici yükseklik tutarsızlıklarını önler.
<!-- Cards with minimum row height for visual consistency -->
<div class="grid grid-cols-3 gap-4" style="grid-auto-rows: minmax(120px, auto)">
<div class="bg-indigo-100 p-4 rounded">Short card</div>
<div class="bg-indigo-100 p-4 rounded">
<p>Longer card with</p>
<p>more content</p>
<p>filling it out</p>
</div>
<div class="bg-indigo-100 p-4 rounded">Short</div>
</div>Izgarayla Uygulamalı Uygulama Kabuğu
Her şeyi bir araya getirdiğimizde, dış düzen için CSS Grid kullanan eksiksiz bir uygulama kabuğu elde ederiz. grid-rows, üst bilgi, içerik ve alt bilgi yüksekliklerini tanımlar. İçerik satırının içinde, iç içe kullanılan grid-cols-[sidebar_main] deseni ekranı böler. Bu yaklaşım temiz ve öngörülebilirdir; üst düzey yapı için mutlak konumlandırmaya veya esnek kutu hilelerine gerek bırakmaz.
<div class="grid h-screen" style="grid-template-rows: 56px 1fr 40px">
<header class="bg-indigo-700 text-white px-6 flex items-center">
My App
</header>
<div class="grid overflow-hidden" style="grid-template-columns: 240px 1fr">
<nav class="bg-indigo-50 p-4 overflow-y-auto border-r">
Sidebar nav
</nav>
<main class="p-6 overflow-y-auto">
Page content
</main>
</div>
<footer class="bg-gray-200 text-center text-sm flex items-center justify-center">
Copyright 2024
</footer>
</div>Hızlı Kontrol
Bu dersteki Tailwind CSS Ustalığı kavramlarını anlayıp anlamadığınızı test edin.
Ders Özeti
Bu derste şunları öğrendiniz: grid-rows-* eşit yüksekliklere sahip açık satır izlerini tanımlar, grid-flow-row ve grid-flow-col yerleştirme yönünü denetler ve grid-flow-dense, yayılma uygulanan öğelerin bıraktığı boşlukları sonradan doldurur. Sırada ızgara kapsayıcılarındaki boşluk yardımcılarını ve hizalama denetimlerini inceleyeceğiz.
Yapay zeka eğitmeniyle HTML öğren — ücretsiz
Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.
- Kurslar
- 30
- Dersler
- 120
Sıkça Sorulan Sorular
“Izgara Satırları ve Otomatik Yerleştirme” dersi ücretsiz mi?
Evet — “Izgara Satırları ve Otomatik Yerleştirme” 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 Tailwind CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Tailwind CSS Academy kursu toplamda 4 dersten oluşur.
“Izgara Satırları ve Otomatik Yerleştirme” dersinde ne öğreneceğim?
grid-rows-* ile açık satırlar tanımlayın, grid-flow-* ile otomatik yerleştirmeyi denetleyin ve tarayıcının öğeleri akıllıca yerleştirmesine izin verin. Tailwind 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.
Tailwind CSS Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Tailwind 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.
“Izgara Satırları ve Otomatik Yerleştirme” 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 Tailwind CSS Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Tailwind 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
- Izgara Sütunlarını Tanımlama
- Sütun ve Satır Birleştirme
- Izgara Satırları ve Otomatik Yerleştirme
- Izgarada Boşluk, Gerekçelendirme ve Hizalama