Hizalanmış İç İçe İçerik için Subgrid
İç içe ızgara ögelerini üst ızgaranın izleriyle hizalamak için subgrid kullanın.
Hizalanmış İç İçe İçerik için Subgrid, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 4. 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.
Alt Izgara Sorunu
Yaygın bir zorluk şudur: her birinde başlık, gövde ve alt bilgi bulunan bir kart ızgaranız vardır. Alt ızgara olmadan farklı kartlardaki öğeler aynı temel çizgilerle hizalanamaz, çünkü her kart kendi bağımsız düzenine sahiptir.
Subgrid nedir?
subgrid, iç içe geçmiş bir grid'in üst grid'in iz tanımlarını devralmasını ve bunlara katılmasını sağlayan, grid-template-columns veya grid-template-rows için kullanılan bir değerdir.
grid-template-rows: subgrid
Aynı zamanda grid kapsayıcısı olan bir grid öğesi, alt öğelerini üst grid'in izleriyle hizalamak için subgrid kullanabilir:
<div class="card-grid">
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">Body</div>
<div class="card-footer">Footer</div>
</div>
</div>grid-template-columns: subgrid
Benzer şekilde, sütunlarda subgrid kullanmak iç içe geçmiş öğelerin üst grid'in sütun izlerine hizalanmasını sağlar. Bu, kart sütunları boyunca hizalanmış etiket-değer çiftleri veya form alanları için kullanışlıdır.
Subgrid ve align-content karşılaştırması
Subgrid olmadan, align-content veya sabit yükseklikler kullanarak içeriği kısmen hizalayabilirsiniz; ancak bu yaklaşım kırılgandır. Subgrid, gerçek içerik yüksekliklerine dayalı gerçek hizalama sağlar.
Form hizalama için Subgrid
Birden çok form sütunundaki etiket-girdi çiftlerini hizalama:
<div class="form-grid">
<div class="form-section">
<label>Name</label><input placeholder="Name" />
<label>Email</label><input placeholder="Email" />
</div>
</div>Subgrid satırları ve sütunları kapsar
Bir subgrid birden çok üst izini kapsayabilir ve her iki yöndeki izleri devralabilir:
<div class="layout"><div class="feature">Feature spans grid</div></div>Subgrid ile adlandırılmış alanlar
Bir subgrid üst öğeden adlandırılmış izleri devraldığında, bu adlar subgrid kapsayıcısı içindeki yerleştirme işlemlerinde kullanılabilir.
Boşlukların devralınması
Subgrid'ler, üst grid'in gap değerlerini varsayılan olarak devralır. İç içe geçmiş grid aynı oluk sistemine katılır.
Tarayıcı desteği hakkında not
Subgrid, Firefox'ta 2019'dan beri kullanılabilir. Chrome, desteği 2023'te ekledi. Artık tüm modern tarayıcılar bunu destekliyor. Üretimde kullanmadan önce hedef kitleniz için desteği doğrulayın.
Subgrid ile aşamalı geliştirme
Subgrid'i bir geliştirme olarak eklemeden önce eski tarayıcılar için sabit yükseklikler veya Flexbox hizalaması kullanarak bir geri dönüş seçeneği sağlayın:
<div class="card-grid"><div class="card">Card content</div></div>Hızlı kontrol
Bir grid öğesinde grid-template-rows: subgrid kullanmak ne yapar?
Özet
Subgrid, ayrı kartlardaki öğelerin aynı taban çizgisine hizalanması gereken kart grid'leri gibi iç içe geçmiş grid içeriğinin hizalama sorununu çözer. Birden çok satırı kapsayan grid öğelerinde grid-template-rows: subgrid, sütunlara hizalanan iç içe içeriklerde ise grid-template-columns: subgrid kullanın. Modern tarayıcı desteği artık evrenseldir.
Sıkça Sorulan Sorular
“Hizalanmış İç İçe İçerik için Subgrid” dersi ücretsiz mi?
Evet — “Hizalanmış İç İçe İçerik için Subgrid” 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.
“Hizalanmış İç İçe İçerik için Subgrid” dersinde ne öğreneceğim?
İç içe ızgara ögelerini üst ızgaranın izleriyle hizalamak için subgrid kullanı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 4. dersidir.
“Hizalanmış İç İçe İçerik için Subgrid” 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