CSS alt ızgarası

Yayınlanma tarihi: 28 Eylül 2023

CSS ızgara çok güçlü bir düzen motorudur ancak üst ızgara üzerinde oluşturulan satır ve sütun parçaları yalnızca ızgara kapsayıcısının doğrudan çocuklarını 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 ile parça boyutlandırma, şablonlar ve adlar iç içe yerleştirilmiş ızgaralarla paylaşılabilir. Bu makalede, bu özelliğin işleyiş şekli açıklanmaktadır.

Alt ızgara öncesi içerikler genellikle bu gibi düzensizliklerin önüne geçmek için manuel olarak ayarlanıyordu.

Yan yana üç kart gösterilir. Her kartta üç içerik parçası bulunur: başlık, paragraf ve bağlantı. Her biri farklı uzunluktaki metinler, yan yana duran kartlarda bazı garip hizalamalara neden oluyor.

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

Yan yana üç kart gösterilir. Her kartta üç içerik parçası bulunur: başlık, paragraf ve bağlantı. Her biri farklı metin uzunluğuna sahiptir ancak alt ızgara, her içerik öğesinin en uzununun satır yüksekliğini ayarlamasına izin vererek uyum sorunlarını düzelterek uyumu düzeltmiştir.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 71.
  • Safari: 16.

Source

Alt ızgaralarla 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 amacıyla kullanılabilir.

.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 */
}
CSS ızgara DevTools'un ekran görüntüsü. Yan yana iki sütun ve sütun satırlarının başında bir ad gösterilmektedir.
https://codepen.io/web-dot-dev/pen/NWezjXv

Bu kadar. Üst tablonun sütunları bir alt tabloya etkili bir şekilde aktarıldı. Bu alt ızgara artık bu sütunlardan birine alt öğe atayabilir.

Meydan okuma! Aynı demoyu grid-template-rows için tekrarlayın.

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

Tasarımcılar genellikle ortak ızgaralarla çalışır, tasarımın tamamının üzerine çizgiler çizer ve istedikleri öğeleri bu çizgilere hizalar. Artık web geliştiricileri de bu avantajlardan yararlanabilir. Artık bu iş akışını ve daha fazlasını gerçekleştirebilirsiniz.

Makro ızgaradan bitmiş tasarıma. Izgara adı verilen alanlar önceden oluşturulur ve daha sonra bileşenler istendiği gibi yerleştirilir.

En yaygın tasarımcı ızgara iş akışını uygulamak, subgrid'ün özellikleri, iş akışları ve potansiyelleri hakkında mükemmel bilgiler 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 vardır.

Chrome CSS ızgara DevTools'dan, satır ve sütunların hızlıca tanımlanması için adlandırıldığı mobil boyutlu bir ızgara düzenini gösteren ekran görüntüsü: tam sayfa, sistem durumu, birincil gezinme, birincil başlık, ana, altbilgi ve sistem hareketleri.

Aşağıdaki CSS, cihaz düzeni için adlandırılmış satırlar ve sütunlar içeren 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
      [