Konuyu Açan
#1
Kart şablonlarında her ekran genişliği için ayrı media query yazmak gerçekten gerekli mi? Son projelerde kart listelerini CSS Grid ile kuruyorum; çoğu durumda tek bir kural, elle belirlenmiş üç kırılım noktasından daha az bakım istiyor:
Buradaki
Yine de bu yaklaşımı her şablona otomatik uygulamak doğru değil. Kartların minimum okunabilir genişliği varsa Grid kendi kararını iyi verir; belirli bir ekranda gezinme düzeninin değişmesi gerekiyorsa media query hâlâ daha açık ve kontrollü. Ayrıca uzun başlık veya taşan görsel gibi içerik sorunları sütun kuralından bağımsız; kart öğesine
Siz kart şablonlarında Grid’in otomatik sütunlarını mı tercih ediyorsunuz, yoksa kırılım noktalarını elle tanımlamak mı daha öngörülebilir geliyor?
KOD
123456
.kartlar {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
gap: 1rem;
}
Buradaki
min(100%, 16rem), dar kapsayıcılarda kartın kullanılabilir alandan geniş kalmasını engelliyor. auto-fit ise sığan sütunları oluşturup boş kalan izleri daraltıyor; kartlar kalan alanı paylaşabiliyor. auto-fill benzer görünse de boş izleri koruyabildiği için özellikle son satırda farklı hizalama sonuçları verebilir. Yani ikisi tamamen birbirinin yerine geçmiyor.Yine de bu yaklaşımı her şablona otomatik uygulamak doğru değil. Kartların minimum okunabilir genişliği varsa Grid kendi kararını iyi verir; belirli bir ekranda gezinme düzeninin değişmesi gerekiyorsa media query hâlâ daha açık ve kontrollü. Ayrıca uzun başlık veya taşan görsel gibi içerik sorunları sütun kuralından bağımsız; kart öğesine
min-width: 0 vermek bazı taşmaları önleyebilir.Siz kart şablonlarında Grid’in otomatik sütunlarını mı tercih ediyorsunuz, yoksa kırılım noktalarını elle tanımlamak mı daha öngörülebilir geliyor?