Konuyu Açan
#1
Ürün kartları katalog sayfasında geniş, yan panelde ya da “benzer ürünler” alanında dar görünebiliyor. Sadece ekran genişliğine bakan medya sorgularıyla tasarlayınca aynı kart farklı bileşenlerde beklenmedik biçimde sıkışabiliyor. Ben bu yüzden kartın kapladığı alana göre düzen değiştirmeyi deniyorum.
Örneğin kartın kendisini kapsayıcı yapıp iç düzenini sorgulayabilirsiniz:
Burada sorgu kartın genişliğine bakıyor; kartın içindeki elemanlar ise düzen değiştiriyor. Kartın kendisini sorgulamaya çalışmamak önemli: kapsayıcı sorguları, kapsayıcının kendisini değil içindeki öğeleri biçimlendirir.
Bir de görsel oranını sabitlemek, farklı ürün fotoğraflarında kartların boyunun zıplamasını önlüyor. çoğu kare ürün görselinde iş görüyor. Container query desteklemeyen eski tarayıcılar için temel tek sütun düzeni bırakıp sorguyu yalnızca geliştirme olarak eklemek de mantıklı.
Siz ürün kartlarında container query mi, medya sorgusu mu tercih ediyorsunuz; hangi yerleşimde farkı en çok gördünüz?
Örneğin kartın kendisini kapsayıcı yapıp iç düzenini sorgulayabilirsiniz:
KOD
12345678910111213141516
.product-card {
container-type: inline-size;
}
.product-card[b]inner {
display: grid;
gap: 1rem;
}
@container (min-width: 28rem) {
.product-card[/b]inner {
grid-template-columns: 8rem 1fr;
align-items: center;
}
}
Burada sorgu kartın genişliğine bakıyor; kartın içindeki elemanlar ise düzen değiştiriyor. Kartın kendisini sorgulamaya çalışmamak önemli: kapsayıcı sorguları, kapsayıcının kendisini değil içindeki öğeleri biçimlendirir.
Bir de görsel oranını sabitlemek, farklı ürün fotoğraflarında kartların boyunun zıplamasını önlüyor.
KOD
1aspect-ratio: 1 / 1; object-fit: cover;Siz ürün kartlarında container query mi, medya sorgusu mu tercih ediyorsunuz; hangi yerleşimde farkı en çok gördünüz?