CSS ızgarası çok güçlü bir düzen motorudur ancak üst ızgarada oluşturulan satır ve sütun kanalları yalnızca ızgara kapsayıcısının doğrudan alt öğelerini konumlandırmak için kullanılabilir. Yazar tarafından tanımlanan adlandırılmış ızgara alanları ve satırlar, doğrudan alt öğe dışındaki herhangi bir öğede kayboldu. subgrid ile kanal boyutları, şablonlar ve adlar iç içe yerleştirilmiş ızgaralarla paylaşılabilir. Bu makalede, özelliğin işleyiş şekli açıklanmaktadır.
Alt ızgaradan önce içerikler genellikle bunun gibi düzensiz düzenlerden kaçınmak için elle özelleştirilirdi.
Alt ızgaradan sonra farklı boyutlardaki içerikleri hizalayabilirsiniz.
Alt ızgarayla ilgili temel bilgiler
CSS subgrid ile ilgili temel bilgilerin açıklandığı basit bir kullanım örneğini burada bulabilirsiniz. Izgara, iki adlandırılmış sütunla tanımlanır. İlk sütun 20ch genişliğinde ve ikinci sütun, 1fr alanının "geri kalanı"dır. Sütun adları zorunlu değildir, ancak gösterim ve eğitim için idealdir.
.grid {
display: grid;
gap: 1rem;
grid-template-columns: [column-1] 20ch [column-2] 1fr;
}
Ardından, bu tablonun bir alt öğesi bu iki sütunu kapsar, bir ızgara kapsayıcısı olarak ayarlanır ve grid-template-columns öğesi subgrid değerine ayarlanarak üst öğesinin sütunlarını alır.
.grid > .subgrid {
grid-column: span 2;
display: grid;
grid-template-columns: subgrid; /* 20ch 1fr */
}
Hepsi bu kadar, üst tablonun sütunları etkin bir şekilde bir seviyeden alt tabloya geçirildi. Bu alt ızgara artık bu sütunlardan birine alt öğe atayabilir.
Meydan okuma! Aynı demoyu tekrarlayın ancak bu işlemi grid-template-rows için yapın.
Sayfa düzeyinde "makro" ızgarasını paylaşma
Tasarımcılar genellikle paylaşılan ızgaralarla çalışır, bir tasarımın üzerine çizgiler çizer ve istedikleri öğeleri hizalar. Artık web geliştiricileri de yapabilir. Tam olarak bu iş akışına ve daha fazlasına artık ulaşabilirsiniz.
En yaygın tasarımcı ızgarası iş akışını uygulamak, subgrid ürününün özellikleri, iş akışları ve potansiyelleri hakkında mükemmel bilgiler sağlayabilir.
Aşağıda, mobil sayfa düzeni makro ızgarasının Chrome Geliştirici Araçları'ndan alınan ekran görüntüsünü görebilirsiniz. Satırların adları vardır ve bileşen yerleşimi için açık alanlar vardır.
Aşağıdaki CSS bu ızgarayı, cihaz düzeni için adlandırılmış satırlar ve sütunlarla oluşturur. Her satır ve sütunun bir boyutu vardır.
.device {
display: grid;
grid-template-rows:
[system-status] 3.5rem
[primary-nav] 3rem
[primary-header] 4rem
[main] auto
[footer] 4rem
[system-gestures] 2rem
;
grid-template-columns: [fullbleed-start] 1rem [main-start] auto [main-end] 1rem [fullbleed-end];
}
Bazı ek stillerde aşağıdaki tasarım kullanılır.
Bu üst öğenin içinde, iç içe yerleştirilmiş çeşitli öğeler vardır. Tasarım, gezinme ve başlık satırlarının altında tam genişlikte bir görüntü gerektirir. En uç sol ve sağ sütun satırı adları fullbleed-start ve fullbleed-end şeklindedir. Kılavuz çizgilerini bu şekilde adlandırmak, çocukların fullbleed yerleşim kısayolu ile aynı anda her bir satıra hizalamasını sağlar. Bu özellik, yakında göreceğiniz gibi oldukça kullanışlıdır.
Güzel adlandırılmış satır ve sütunlarla oluşturulan genel cihaz düzeni sayesinde, iyi adlandırılmış satır ve sütunları iç içe yerleştirilmiş ızgara düzenlerine iletmek için subgrid kullanın. İşte subgrid, muhteşem bir andı. Cihaz düzeni, adlandırılmış satırları ve sütunları uygulama kapsayıcısına iletir. Daha sonra da bunu alt öğelerinin her birine iletir.
.device > .app,
.app > * {
display: grid;
grid: subgrid / subgrid;
/* same as */
grid-template-rows: subgrid;
grid-template-columns: subgrid;
}
CSS alt ızgarası, ızgara kanalları listesi yerine kullanılan bir değerdir. Öğenin üst öğesinden kapladığı satır ve sütunlar artık sunduğu satır ve sütunların aynısıdır. Bu, .device tablosundaki satır adlarını yalnızca .app yerine .app alt öğeleri tarafından kullanılabilir hale getirir. .app içindeki öğeler, alt ızgaradan önce .device tarafından oluşturulan ızgara kanallarına referans veremedi.
Tüm bunlar tanımlanmışken, iç içe yerleştirilmiş resim artık subgrid sayesinde düzeni tamamen kaplayabilir. Olumsuz değerler veya püf noktaları yok. Bunun yerine "düzenim fullbleed-start ile fullbleed-end arasında değişiyor" yazan tek satırlık güzel bir yazı.
.app > main img {
grid-area: fullbleed;
}
İşte bu kadar, tasarımcıların kullandığı bir makro ızgara ve CSS'ye uygulandı. Bu konsept gerektikçe sizinle birlikte ölçeklendirilebilir ve büyüyebilir.
Desteği kontrol edin
CSS ve alt ızgara ile progresif geliştirme süreci tanıdık ve basittir.
@supports öğesini kullanın ve parantezin içinde tarayıcıya alt ızgarayı şablon sütunlarının veya satırları için bir değer olarak anlayıp anlamadığını sorun. Aşağıdaki örnek, grid-template-columns özelliğinin subgrid anahtar kelimesini destekleyip desteklemediğini kontrol eder. Doğru ise alt ızgara kullanılabilir demektir.
@supports (grid-template-columns: subgrid) {
/* safe to enhance to */
}
Geliştirici Araçları
Chrome, Edge, Firefox ve Safari'nin hepsinde mükemmel CSS ızgara Geliştirici Araçları vardır. Chrome, Edge ve Firefox ise alt ızgara konusunda yardımcı olacak özel araçlara sahiptir. Chrome, araçlarını 115 yılında duyurdu. Firefox ise bir yıldır kullanıyor.
Alt ızgara rozeti, ızgara rozeti gibi çalışır ancak hangi ızgaraların alt ızgara olduğunu ve hangilerinin olmadığını görsel olarak ayırt eder.
Kaynaklar
Bu liste, alt kılavuz makalelerini, demoları ve başlangıç için genel ilham verici bilgileri derlemektedir. Alt kılavuz eğitiminizle ilgili bir sonraki adımı arıyorsanız bu muhteşem kaynakları keyifle keşfedebilirsiniz!
- MDN
- Rachel Ahmet'in uyumlu altyazıları
- 10 mükemmel örnekle Rachel Andrew
- Örnek siteyle Rachel Andrew
- Ahmad Shadeed makalesi
- Michelle Barker, CSS Günü 2022'de
- Kartlar
- Formlarla Chris Coyier
- Form hizalaması ile Faacundo Corradini
- Liste öğesi işaretçilerini hizalayan Chris Coyier
- Michelle Barker üst ızgarayla hizalamak için container'dan dışarı çıkıyor
- Adlandırılmış satır adlarını ve alt ızgara etkileşimlerini gösteren Miririam Suzanne
- Kevin Powell'ın belirttiği alan ile ilgili temel bilgiler
- Kevin Powell, uyumlu listelere sahip
- Uyumlu listelere sahip Shannon Moeller
- Kevin Powell'ın bileşenlere aktarılmış sayfa düzeyi ızgarası
- Geliştirme aracı yer paylaşımı ve yedek ile Yaşlı Shechter
- Aaron Iker, dipnotların referans hizalaması için alt ızgarayı güzel bir tipografik kullanarak kullandı
- Bir makalenin içinde tüm alanı kaplayan bir resim görünen Adam Argyle
Yeni birlikte çalışabilirlik özelliği serisinin bir parçası