Subgrid
subgrid ile iç ızgara kalıtımını öğrenirsin.
Subgrid nedir?
Bir ızgara (grid) kabına display: grid verdiğinde, çocukları ızgara ögesi olur. Bazen iç içe geçmiş öğelerin, dış ızgaranın sütun ve satırlarına hizalanmasını istersin. grid-template-columns: subgrid bunu sağlar.
subgrid değeri, iç ızgaraya yeni sütun tanımlamak yerine, dış ızgaranın izlerini miras alır. Böylece kart içindeki başlık, görsel ve açıklama, üst ızgaranın sütun çizgilerine tam uyar.
İç ızgara mirası
subgrid kullanıldığında iç öğe kendi ızgarasını kurmaz; bunun yerine üst ızgaranın satır ve sütun çizgilerini devralır. Üstteki sütun genişliği değiştiğinde içteki hizalama da otomatik güncellenir.
Örneğin dört sütunlu bir kart ızgarasında her kartın başlığı ve görseli, üst ızgaranın aynı sütun çizgisinden başlar. Böylece hizalamada kayma olmaz; tasarım tutarlı kalır.
Ne zaman kullanmalısın?
subgrid en çok iç içe kart, tablo benzeri listeler ve hizalı form etiketleri için yararlıdır. Üst ızgara yeniden boyutlandığında iç öğelerin de otomatik uyum sağlamasını istediğinde kullan.
Ancak her ızgara iç içe geçmiş öğe subgrid istemez. Bağımsız bir iç ızgara tasarlamak istiyorsan yeni sütun tanımları vermek daha doğru olur. subgrid bir hizalama aracıdır, her durumun çözümü değil.
Uygulama Kart ızgarasına subgrid tanımla
.card seçicisi için ızgara tanımla. display: grid ve grid-template-columns: subgrid bildirimlerini ver. Böylece kart içeriği üst ızgaranın sütunlarını miras alır.
Örnek çözümü göster
/* kart sütunları üst ızgarayı miras alsın */
.card {
display: grid;
grid-template-columns: subgrid;
}Kendini test et
-
Hangisi subgrid için doğru yazımdır?
- grid-template-columns: subgrid
- grid-template-columns: inherit
- grid-columns: sub
- subgrid: true
Cevabı göster
grid-template-columns: subgrid — Doğru. subgrid değeri grid-template-columns veya grid-template-rows özelliğine verilir.
-
Subgrid değerini yaz
.card { display: grid; grid-template-columns: ____; }Cevabı göster
.card { display: grid; grid-template-columns: subgrid; }