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.