CSS subgrid, iç içe geçmiş grid kapsayıcılarının satır ve sütun tanımlarını doğrudan ana grid kapsayıcısından devralmasına olanak tanıyan bir özelliktir. Bu araç, her iç içe öğe için manuel olarak aynı grid izlerini tanımlamak zorunda kalmadan, bir yerleşimin farklı bölümleri arasındaki içeriği hizalama sorununu çözer. grid-template-rows veya grid-template-columns özelliklerinde subgrid’i bir değer olarak ayarlayarak geliştiriciler, bağlantısız DOM düğümleri arasında sıkı hizalama gerektiren karmaşık yerleşimler üzerinde kontrol sahibi olurlar.
Geliştiriciler neden CSS subgrid kullanmalıdır?
Subgrid kullanmanın birincil avantajı, sihirli sayıların (magic numbers) ve katı yerleşim bağımlılıklarının ortadan kaldırılmasıdır. Tipik bir projede, bir sayfa yerleşimi için küresel bir grid tanımlayan ana bir kapsayıcınız olabilir. Subgrid olmadan, bu hücrelerden birinin içine yerleştirilmiş bir kart bileşeniniz varsa, kendi bağımsız grid’i olurdu. Bu kartın içindeki öğeleri dışındaki öğelerle hizalamak, içerik boyutları değiştiğinde zor olan tam iz boyutlarının eşleştirilmesini gerektirir. Subgrid, çocuğun ebeveynin grid koordinat sistemine katılmasına izin vererek bu engeli kaldırır.
Duyarlı (responsive) kesme noktalarında tutarlı boşlukları korumak, subgrid’in net bir avantaj sağladığı başka bir alandır. Subgrid kullandığınızda, çocuk bileşen otomatik olarak ana izlerin boyutuna uyum sağlar. Bu, birden çok karttaki düğmelerin, başlıkların veya görsellerin yatay veya dikey eksende mükemmel şekilde hizalanmasını sağlar. Geliştiriciler genellikle bunun gereken CSS kodu miktarını azalttığını fark ederler, çünkü artık ana sayfa yapısıyla hizalanması gereken her bileşen için yinelenen grid sistemleri tanımlamalarına gerek kalmaz.
Subgrid pratikte nasıl çalışır?
MDN Web Docs, subgrid’in iç içe geçmiş grid kapsayıcılarının satır ve sütun tanımlarını doğrudan ana grid kapsayıcısından devralmasına izin verdiğini doğrular. Bunu uygulamak için öncelikle display: grid özelliğine sahip bir ana kapsayıcı tanımlarsınız. Ardından, iç içe geçmiş çocuğa grid-template-columns veya grid-template-rows ‘subgrid’ değerini atarsınız. Bu, tarayıcıya çocuğun kendi izlerini oluşturmaması gerektiğini, bunun yerine ebeveynin tanımına uyması gerektiğini bildirir. Çocuk öğeler daha sonra ebeveyn tarafından oluşturulan çizgiler üzerine yerleştirilir.
Uygulama kontrol listesi
- Ana kapsayıcısını açık izlere sahip bir grid olarak tanımlayın.
- Çocuk kapsayıcı display özelliğini grid olarak ayarlayın.
- Çocuğa grid-template-columns: subgrid veya grid-template-rows: subgrid uygulayın.
- Çocuk öğelerin miras alınan grid çizgilerine göre konumlandırıldığından emin olun.
CSS Grid ve CSS Subgrid: Doğru aracı seçmek
| Özellik | Standart Grid | Subgrid |
|---|---|---|
| İz Tanımı | Bağımsız | Miras alınan |
| Yerleşim Hizalama | Yalnızca yerel kapsam | Bileşenler arası kapsam |
| Karmaşıklık | Daha düşük kurulum çabası | Daha yüksek koordinasyon çabası |
Subgrid’i ne zaman kaçınmalısınız?
Subgrid hizalama için verimli olsa da, her yerleşim gereksinimi için her zaman en iyi seçim değildir. İç içe bileşeniniz ana yerleşimle hiçbir ilişkisi olmayan tamamen bağımsız bir grid yapısını koruması gerekiyorsa, subgrid kullanmak gereksiz bir bağımlılık (coupling) getirir. Ana grid’deki değişiklikler çocuğu beklenmedik şekilde etkileyebilir ve bu da hata ayıklaması zor olan yerleşim kaymalarına yol açabilir. Bileşenlerin gerçekten modüler ve kendi kendine yeterli olduğu durumlarda, standart grid tanımları genellikle daha güvenilirdir.
Göz önünde bulundurulması gereken bir diğer faktör, yeni bir projenin erken geliştirme aşamasındaki tarayıcı desteğidir. Hedef kitleniz eski tarayıcı sürümlerini kullanıyorsa, uyumluluk gereksinimlerini doğrulamalısınız. Modern tarayıcılar artık subgrid’i desteklese de, eski ortamlar için hala bir geri dönüş (fallback) stratejisi gerekebilir. Basit bir geri dönüş, subgrid davranışı mevcut olmasa bile yerleşimin işlevsel kalmasını sağlayarak, bir özellik sorgusu (feature query) içinde standart grid özelliklerinin kullanılmasını içerir.
Alien Road subgrid’i nasıl uygular?
Alien Road’da ekibimiz, yüksek performanslı dijital vitrinlerde görsel tutarlılığı sağlamak için subgrid kullanır. Örneğin, bir perakende müşterisi için ürün listeleme sayfası oluştururken, genellikle ürün kartlarının farklı uzunluklarda başlıklarına sahip olduğu zorluklarla karşılaşırız. Bu kartlara subgrid uygulayarak, tüm başlık kapsayıcılarını aynı satır izleriyle mükemmel bir şekilde hizalanmaya zorlarız. Bu, her bir öğe içindeki içerik uzunluğundan bağımsız olarak temiz, profesyonel bir görünüm oluşturur.
Süreçimiz, hizalamanın kritik olduğu alanları belirlemek için tasarım tel kafeslerinin (wireframes) ilk denetimiyle başlar. Sayfanın ritmini belirleyen bir ana grid tanımlarız ve ardından bu ritme uyum sağlamak için tekrarlayan bileşenler içinde subgrid uygularız. Bu sistematik yaklaşım, hem görsel olarak dengeli hem de bakımı kolay siteler sunmamızı sağlar. Bir müşteri genel boşluklarda bir değişiklik talep ettiğinde, yalnızca ana kapsayıcısını güncellememiz gerekir ve değişiklikler subgrid’ler aracılığıyla yayılır.
Dikkat edilmesi gereken yaygın tuzaklar nelerdir?
- Aşırı iç içe yerleştirme: Çok fazla subgrid seviyesi oluşturmak, CSS’in okunmasını ve bakımını zorlaştırabilir.
- Eksik iz tanımları: Ebeveynin açık izleri yoksa, subgrid’in devralacağı hiçbir şeyi olmayacak ve varsayılan bir davranışla sonuçlanacaktır.
- Örtük izler: Otomatik oluşturulan izlere güvenmek, öğeler arasında içerik boyutları tutarsız olduğunda hizalama sorunlarına neden olabilir.
- Performans endişeleri: CSS grid verimli olsa da, aşırı derin iç içe yerleştirme çok karmaşık DOM ağaçlarında tarayıcı oluşturmasını (rendering) karmaşıklaştırabilir.
Subgrid yerleşimlerinde nasıl hata ayıklanır?
Subgrid yerleşimlerinde hata ayıklamak genellikle grid çizgilerini görselleştirmek için tarayıcı geliştirici araçlarını gerektirir. Çoğu modern tarayıcı, grid izlerini ve çizgi numaralarını görüntüleyen bir yerleşimi (overlay) açıp kapatmanıza izin verir. Subgrid kullanan bir öğeyi seçtiğinizde, tarayıcı miras alınan izleri vurgulayacaktır. Hizalama yanlış görünüyorsa, önce ana grid tanımını kontrol edin. Çoğu zaman sorun subgrid’in kendisinde değil, ana grid’in yeterli alan ayıramamasından veya yanlış boşluk özelliklerine sahip olmasından kaynaklanır.
Çocuk öğelerinizin gerçekten amaçlanan izleri kapsadığını doğrulayın. Bir öğenin doğru çizgide konumlandırılıp konumlandırılmadığını belirlemeye yardımcı olan grid etiketlerini değiştirmek için tarayıcının denetim panelini kullanabilirsiniz. Öğе yerine oturmuyorsa, ana kapsayıcının çocukları barındırmak için yeterli satır veya sütun tanımladığından iki kez emin olun. Tipik bir sorun giderme oturumunda, çocuklardaki grid-column veya grid-row değerlerinin ebeveynin çizgilerine göre doğru şekilde ayarlandığını doğrularız.
Bu hafta nereden başlamalısınız?
Mevcut web projelerinizi hizalama ile mücadele eden bileşenler açısından denetleyerek başlayabilirsiniz. İçeriği hizalamaya zorlamak için manuel olarak yükseklikler veya genişlikler ayarladığınız durumları arayın. Bu manuel ayarlamaları subgrid kullanan bir ebeveyn-çocuk grid yapısıyla değiştirin. Ebeveyn çizgilerinin çocuk yerleşimini nasıl etkilediğine alışmak için kart listesi gibi basit bir bileşenle başlayın. Temel sözdizimini kavradıktan sonra, hem satır hem de sütun hizalamasını içeren daha karmaşık yerleşimlere geçin.
Sıkça Sorulan Sorular
Subgrid tüm tarayıcılarda destekleniyor mu?
Çoğu modern tarayıcı artık subgrid özelliği için destek sağlamaktadır. Bununla birlikte, bir üretim ortamında dağıtmadan önce mevcut uyumluluk tablolarını kontrol etmek her zaman önerilir. Eski tarayıcıları desteklemeniz gerekiyorsa, sitenizin tarayıcı sürümünden bağımsız olarak tüm ziyaretçiler için kullanılabilir kalmasını sağlayan temel bir geri dönüş yerleşimi sağlamak için özellik sorguları kullanın.
Subgrid sayfa performansını etkiler mi?
Subgrid yerel bir tarayıcı özelliğidir ve genellikle verimlidir. Standart grid yerleşimlerine kıyasla önemli bir ek yük (overhead) getirmez. Temel endişe performans değil, kodun karmaşıklığıdır. Grid yapınızı net tutmak ve aşırı iç içe yerleştirmeden kaçınmak, devam eden web geliştirme görevleriniz için performanslı ve okunabilir bir kod tabanı korumanıza yardımcı olur.
Subgrid’i hem satırlar hem de sütunlar için kullanabilir miyim?
Evet, subgrid’i satır eksenine, sütun eksenine veya her ikisine aynı anda uygulayabilirsiniz. Hem grid-template-rows hem de grid-template-columns değerlerini subgrid olarak ayarlayarak, çocuk kapsayıcının ebeveynin tüm grid geometrisini devralmasını sağlarsınız. Bu, özellikle iç içe öğelerin ana hücreleri içinde tam hizalanmasına ihtiyaç duyduğunuz karmaşık yerleşimler için çok yararlıdır.
Ana grid değişirse ne olur?
Ana grid tanımı değiştiğinde, subgrid otomatik olarak yeni iz boyutlarına ve konumlarına uyum sağlar. Bu, tek bir kontrol noktasına izin verdiği için özelliğin ana avantajıdır. Ebeveyne yeni bir iz eklerseniz, subgrid, miras alınan izleri çocuk öğede nasıl tanımladığınıza bağlı olarak bu değişikliği hesaba katacaktır.
Subgrid ile hizalama sorunlarını nasıl gideririm?
Hizalama sorunlarını gidermek için tarayıcınızın geliştirici araçlarında ana grid çizgilerini inceleyerek başlayın. Çocuk kapsayıcının doğru şekilde subgrid olarak ayarlandığından ve çocuklarının doğru grid çizgilerine atandığından emin olun. Çoğu zaman hizalama sorunları, subgrid uygulamasının kendisindeki bir sorundan ziyade çocuk öğelerdeki yanlış iz yayılım (span) değerlerinden kaynaklanır.
Okumaya devam edin: Web Tasarımı ve Geliştirme · Web Tasarımı