CSS alt ızgarası

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ının doğrudan alt öğelerini konumlandırmak için kullanılabilir. Yazar tarafından tanımlanan tüm adlandırılmış ızgara alanları ve satırlar, doğrudan alt öğe dışındaki diğer öğelerde kayboldu. subgrid sayesinde kanal boyutlandırma, şablonlar ve adlar, iç içe yerleştirilmiş ızgaralar aracılığıyla paylaşılabilir. Bu makalede, sürecin işleyiş şekli açıklanmaktadır.

Alt ızgara önce, içerikler genellikle bunun gibi düzensiz düzenlerden kaçınacak şekilde özel olarak uyarlanıyordu.

Alt ızgaradan sonra değişken boyuttaki içeriği hizalamak mümkündür.

Alt ızgara ile ilgili temel bilgiler

CSS'nin temellerini tanıtan basit bir kullanım alanı örneğini aşağıda bulabilirsiniz subgrid. Bir ızgara, iki adlandırılmış sütunla tanımlanır. Bunlardan ilki 20ch genişliğinde, ikincisi ise alanın "geri kalanı"dır 1fr. Sütun adları zorunlu değildir ancak açıklama ve eğitim açısından idealdir.

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: [column-1] 20ch [column-2] 1fr;
}

Ardından, bu ızgaranın iki sütunu kapsayan bir alt öğesi, ızgara kapsayıcısı olarak ayarlanır ve grid-template-columns değerini subgrid olarak ayarlayarak üst öğesinin sütunlarını benimser.

.grid > .subgrid {
  grid-column: span 2;

  display: grid;
  grid-template-columns: subgrid; /* 20ch 1fr */
}

Hepsi bu kadar. Bir üst ızgaranın sütunları, etkili bir şekilde seviyeden alt tabloya geçirilmiştir. Bu alt tablo artık bu sütunlardan birine alt öğeler atayabilir.

Meydan okuma! Aynı demoyu tekrarla ama bu işlemi grid-template-rows boyunca yap.

Sayfa düzeyinde "makro" ızgara paylaşma

Tasarımcılar genellikle paylaşılan ızgaralarla çalışır ve bir tasarımın tamamı üzerinde çizgiler çizer ve istedikleri öğeleri hizalar. Artık web geliştiricileri de bunu yapabilir! Artık tam olarak bu iş akışı ve daha pek çok iş akışı gerçekleştirilebilir.

Tasarımcıların en sık kullandığı ızgara iş akışını uygulamak, subgrid ürününün özellikleri, iş akışları ve potansiyelleri hakkında mükemmel analizler sağlayabilir.

Aşağıda, Chrome Geliştirici Araçları'ndan alınmış bir mobil sayfa düzeni makrosu ızgara ekran görüntüsü verilmiştir. Satırların adları vardır ve bileşen yerleşimi için net alanlar bulunur.

Aşağıdaki CSS, cihaz düzeni için adlandırılmış satırlar ve sütunlarla bu ızgarayı 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 stiller aşağıdaki tasarımı oluşturur.

Bu üst öğenin içinde çeşitli iç içe yerleştirilmiş öğeler bulunur. Tasarım için gezinme ve başlık satırlarının altında tam genişlikte bir resim gerekir. En soldaki ve en sağdaki sütun satır adları fullbleed-start ve fullbleed-end'dur. Kılavuz çizgilerini bu şekilde adlandırmak, alt öğeleri fullbleed yerleşimi ile aynı anda uyumlu hale getirmelerini sağlar. Yakında göreceğiniz gibi bu yöntem çok 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 aktarmak için subgrid kullanın. Bu, subgrid sihirli an. Cihaz düzeni, adlandırılmış satırları ve sütunları uygulama kapsayıcısına iletir. Uygulama kapsayıcısı da bu bilgileri 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 ızgara, ızgara kanalları listesi yerine kullanılan bir değerdir. Öğenin üst öğesinden kapsadığı satırlar ve sütunlar artık sunduğu satırlar ve sütunlarla aynıdır. Bu, .device ızgarasındaki satır adlarını yalnızca .app yerine .app öğesinin alt öğeleri tarafından kullanılabilir hale getirir. .app içindeki öğeler, alt ızgaradan önce .device tarafından oluşturulan ızgara kanallarına referans verememiştir.

Tüm bunlar tanımlandığında, iç içe yerleştirilmiş resim subgrid sayesinde artık düzende kenarlara kadar sığabilir. Negatif değerler veya hile yok. Bunun yerine "düzenlemem fullbleed-start ile fullbleed-end arasında değişiyor" yazan güzel bir tek satırlık ifade var.

.app > main img {
    grid-area: fullbleed;
}

Tasarımcıların kullandığı gibi bir makro tablo CSS'de uygulanmış halde hazır. Bu kavram, gerektiği şekilde sizinle birlikte ölçeklendirilebilir ve gelişebilir.

Destek için kontrol edin

CSS ve alt ızgara ile progresif geliştirme bilindik ve anlaşılır. @supports değerini kullanın ve parantez içinde tarayıcıya, alt ızgarayı şablon sütunları 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. Bu anahtar kelime, doğruysa alt ızgaranın kullanılabileceği anlamına gelir.

@supports (grid-template-columns: subgrid) {
  /* safe to enhance to */
}

Geliştirici Araçları

Chrome, Edge, Firefox ve Safari'nin hepsinde CSS ızgaralı Geliştirici Araçları bulunurken Chrome, Edge ve Firefox'un alt ızgara konusunda yardımcı olacak özel araçları vardır. Chrome, araçlarını 115'te duyurdu. Firefox ise bu araçlara bir yıl veya daha uzun süredir sahip.

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, başlangıç için alt ızgara makaleleri, demolar ve genel ilham kaynaklarının bir derlemesidir. Alt ızgara eğitiminizde bir sonraki adımı arıyorsanız bu harika kaynakları keşfetmekten keyif alacaksınız.

• MDN
• Altyazılar hizalanmış Rachel Andrew
• 10 muhteşem örnekle Rachel Andrew
• Örnekler sitesiyle Rachel Andrew
• Ahmet'in Gölgesi makalesi
• Michelle Barker, CSS Günü 2022'de
• Kartlar
  • Jhey Codepen
  • Ahmad Shadeed tarafından geliştirilen Codepen
  • Takeshi Kano tarafından oluşturulan Codepen
  • Arvid tarafından oluşturulan Codepen
  • Chris Coyier'den Codepen
  • Miriam Suzanne tarafından oluşturulan Codepen
• Chris Coyier with forms
• Form hizası olan Facundo Corradini
• Hizalama liste öğesi işaretçileriyle Chris Coyier
• Michelle Barker, üst ızgaraya uyum sağlamak için kapsayıcıdan çıkıyor
• Adlandırılmış satır adlarını ve alt tablo etkileşimlerini gösteren Miriam Suzanne
• Kevin Powell ile adlandırılmış alanlarla ilgili temel bilgiler
• Kendisi ile uyumlu listeler olan Kevin Powell
• Uyumlu listelerle Shannon Moeller
• Bileşenlere aktarılan sayfa düzeyinde bir ızgarayla Kevin Powell
• Geliştirici aracı yer paylaşımı ve yedeğiyle Elad Shechter
• Aaron Iker, dipnotların temel çizgisi için alt ızgarayı güzel bir tipografik şekilde kullanıyor
• Adam Argyle'ın bir makalenin tam çerçeve resmi