Ö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;
}

Sıradaki ders: Writing-mode

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler