Özet - Modern kart ızgarası
Modern düzen özellikleriyle kart ızgarası kurarsın.
Modern kart ızgarası
Bu grupta dört modern düzen aracı öğrendin: subgrid ile iç ızgarayı üst ızgaraya hizaladın; @container ile kabın genişliğine göre biçim değiştirdin; aspect-ratio ile sabit oranlı yer tutucular kurdun; object-fit ile görselleri çerçeveye sığdırdın.
Şimdi bu dördünü bir araya getiren bir kart ızgarası kuracaksın. Kartlar container olarak işaretlenecek, içlerinde sabit oranlı görsel olacak ve içerik hizalaması subgrid ile korunacak.
Uygulama Kart ızgarasını kur
.cards seçicisine dört bildirim ver: display: grid, grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)), gap: 1.5rem ve container-type: inline-size. Böylece kart ızgarası hem duyarlı hem de container sorgusuna açık olur.
Örnek çözümü göster
/* kart ızgarası: duyarlı ve container sorgusuna açık */
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.5rem;
container-type: inline-size;
}Uygulama Kart içeriğini subgrid ile hizala
.card seçicisine iki bildirim ver: display: grid ve grid-template-columns: subgrid. Böylece kart içeriği üst ızgaranın sütun çizgilerine hizalanır.
Örnek çözümü göster
/* kart içeriği üst ızgaraya hizalansın */
.card {
display: grid;
grid-template-columns: subgrid;
}Kendini test et
-
Bir kabı container sorgusuna açan özellik hangisidir?
- display: container
- container-name: main
- container-type: inline-size
- position: container
Cevabı göster
container-type: inline-size — Doğru. container-type: inline-size kabın genişliğini sorguya açar.
-
Kart görseline object-fit ver
.card img { ____: cover; width: 100%; aspect-ratio: 4 / 3; }Cevabı göster
.card img { object-fit: cover; width: 100%; aspect-ratio: 4 / 3; }