Meydan okuma - Modern düzen

Subgrid ve container queries ile modern düzen kurarsın.

Modern düzen araçları

Modern CSS, kaba duyarlılık için üç araç verir. subgrid bir ızgaradaki alt kabın sütun ve satırları üst kabından devralmasını sağlar; hizalama otomatik kurulur. container-type: inline-size ile kaba göre sorgu kurulur, @container (min-width: 30rem) içindeki bildirimler kabın genişliğine göre değişir.

aspect-ratio: 16/9 oranı sabitler; object-fit: cover görseli kabı dolduracak biçimde kırpar. Dört özellik birleşince medya sorgusu yazmadan duyarlı kart ızgarası kurulur.

Uygulama Modern kart ızgarasını tamamla

Aşağıdaki CSS'i tamamla. .gallery kabı ızgara olsun ve üç eşit sütun (her biri 1fr) taşısın. .card etiketinde aspect-ratio: 4/3 olsun. .card img seçicisinde object-fit: cover, width: 100% ve height: 100% bildirimleri olsun.

Örnek çözümü göster

/* ızgara kabı */
.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

/* kart */
.card {
  aspect-ratio: 4/3;
}

/* kart görseli */
.card img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

Kendini test et

Modern düzen özelliklerini eşle

subgrid

Alt kaba üst ızgarayı devraltır
container-type

Kabı sorgulanabilir yapar
aspect-ratio

Oranı sabitler
object-fit: cover

Görseli kırparak doldurur

subgrid değerini yaz

.card {
  display: grid;
  grid-template-columns: ____;
  grid-column: span 1;
}

Cevabı göster

.card {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 1;
}

container query kurmak için hangi bildirim önce yazılır?
```
??? {
}

@container (min-width: 30rem) {
  .card { font-size: 1.25rem; }
}
```
- @container
- @media
- container-name
- container-type
Cevabı göster

container-type — Doğru. Önce kabın container-type değeri verilir, sonra @container ile sorgulanır.

Sıradaki ders: Meydan okuma - İleri seviye projesi

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler