Bir blogun kategori sayfası, tasarımın gerçek içerikle sınandığı yerlerden biridir. Kısa ve uzun başlıklar yan yana gelir, bazı yazıların özeti iki satırken diğerleri beş satır sürer. Mobil ekranda tek sütun isteyen liste, daha geniş alanda birkaç sütuna yayılmalıdır. CSS Grid, bu yerleşimi açık kurallarla tarif etmek için kullanışlı bir araçtır.
Bu rehberde KodOrtak benzeri bir teknoloji blogu için kart listesi tasarlayacağız. Hedefimiz belirli telefon modelleri için ayrı düzenler hazırlamak yerine, eldeki alana sığan sütun sayısını kullanmak. Kodlar öğretici örneklerdir; projenizdeki tema ve tarayıcılarla ayrıca doğrulanmalıdır.
Grid hangi sorunu çözer?
MDN Grid rehberi, sistemi satırları ve sütunları birlikte yönetebilen iki boyutlu bir yerleşim modeli olarak tanımlar. Kapsayıcıya display: grid verildiğinde doğrudan çocukları Grid öğeleri olur. Sütunları tanımlayabilir, öğeler arasındaki mesafeyi belirleyebilir ve gerektiğinde otomatik satırlar oluşturabilirsiniz.
Örneğimizde her kart bir yazıyı temsil edecek. Sayfanın ana başlığı h1, kart başlıkları h2 olabilir. Kartın tamamını tıklanabilir yapmak için iç içe bağlantılar üretmek yerine, başlangıçta başlığa açık bir bağlantı vermek yeterlidir. Yerleşim sistemi seçimi, içerik yapısını belirleme sorumluluğunun yerine geçmez.
<div class="yazi-listesi">
<article class="yazi-karti">
<p>Web Tasarım</p>
<h2><a href="/ornek-yazi/">Esnek kart tasarımı</a></h2>
<p>Yazının konusunu açıklayan kısa ve anlaşılır özet.</p>
</article>
<!-- Diğer yazı kartları aynı yapıyla eklenir. -->
</div>Esnek sütunları oluşturun
.yazi-listesi {
display: grid;
grid-template-columns:
repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
gap: 1.25rem;
}
.yazi-karti {
min-width: 0;
padding: 1.25rem;
border: 1px solid #d8dee8;
border-radius: 0.75rem;
overflow-wrap: anywhere;
}
.yazi-karti h2 {
margin-block: 0.5rem 0.75rem;
}Buradaki 17rem, kartın tercih edilen alt genişliği için seçtiğimiz örnek değerdir. Kapsayıcı bundan daha darsa min(100%, 17rem) alt sınırı kullanılabilir genişliğe indirir. Böylece yalnızca sabit bir minimum yüzünden dar ekranda taşma oluşturma riskini azaltırız. Yine de kartın içindeki uzun içerikleri ayrıca kontrol etmeliyiz.
minmax(), sütun için alt ve üst boyut sınırı tanımlar. Örnekte üst sınırdaki 1fr, kalan alanın esnek paylaşımına katılır. Bu değeri “ekranın sabit bir yüzdesi” olarak düşünmeyin; boşluklar ve diğer sütun kuralları da hesaplamaya dâhildir.
auto-fit ve auto-fill arasındaki fark
repeat() belgesi, otomatik tekrar davranışını ayrıntılandırır. auto-fill, alana sığan sütunları hesaplar ve boş kalan izleri koruyabilir. auto-fit ise yerleşim sonrasında tamamen boş kalan izleri daraltır. Örnekte esnek üst sınırla birlikte kullanıldığında mevcut kartlar kalan alanı paylaşabilir.
Bunu anlamak için listemizde yalnızca iki yazı bulunduğunu düşünelim. Çok geniş bir alanda bu iki kartın büyümesini istiyorsak auto-fit uygun bir başlangıçtır. Kartların, daha fazla içerik varmış gibi daha dar sütun ölçüsünü korumasını istiyorsak auto-fill davranışını değerlendirebiliriz.
Bu ayrım son satırdaki her boş hücrenin tek tek kapatılması anlamına gelmez. Önceki satırlarda dolu olan bir sütun, son satırda eksik kart bulunduğu için tamamen boş iz sayılmaz. Bu nedenle iki kartlı listeyi ve sekiz kartlı listeyi ayrı görmek, davranışı yalnızca tek ekran görüntüsünden çıkarmaktan daha yararlıdır.
Gerçek başlıklarla tasarlayın
Örnek listemizde bir yazının başlığı “CSS Grid”, diğerinin başlığı ise birkaç teknoloji adını birden içeriyor olsun. Kartlara sabit yükseklik verdiğimizde uzun başlığın özeti dışarı itmesi mümkündür. Başlangıçta içerik yüksekliğine izin vermek, gereksiz kırpma kurallarından kaçınmamıza yardımcı olur.
Başlıkları mutlaka iki satırla sınırlamak istiyorsanız bunun editoryal etkisini de düşünün. Okuyucu, yazının ayırt edici son bölümünü göremeyebilir. Örnek blogumuz için önce başlık uzunluğunu içerik aşamasında düzenlemek, yalnızca tasarımı kurtarmak amacıyla bilgiyi gizlemekten daha anlaşılır bir süreç sağlar.
Boş durum da tasarımın bir parçasıdır. Kategoride hiç yazı yoksa boş bir Grid bırakmak yerine açıklayıcı bir metin gösterebiliriz. Tek yazı kaldığında kartın çok geniş görünmesi hoşumuza gitmiyorsa liste kapsayıcısına veya kart düzenine ayrı bir ürün kararı uygulayabiliriz; bunun için bütün sütun sistemini değiştirmemiz gerekmez.
Grid ile Container Queries birlikte kullanılabilir
Grid, bu örnekte kartların sayfada nasıl dizileceğini belirler. Kartın kendi içindeki başlık, görsel veya etiket düzenini bulunduğu alana göre değiştirmek ise ayrı bir ihtiyaçtır. Bunun için Container Queries yazımızdaki yaklaşımı değerlendirebilirsiniz.
Önerilen iş bölümü basittir: Önce listeyi kurun, ardından gerçekten gerekli kart içi uyarlamaları ekleyin. Her sorun için yeni bir media query yazmadan önce sorunun liste sütununda mı, yoksa tek kartın içeriğinde mi olduğunu belirleyin.
Yayına hazırlık
Listeyi bir, iki, beş ve on yazıyla inceleyin. Dar bir sütunda, büyük ekranda ve büyütülmüş metinle deneyin. Klavyeyle bağlantılar arasında ilerleyerek görsel sıralamanın içerik sırasıyla uyumlu kaldığını kontrol edin. Geliştirici araçlarındaki Grid çizgileri, hangi sütunun neden büyüdüğünü anlamayı kolaylaştırır.
İyi bir kart listesi yalnızca düzenli kutular üretmez; başlıkların okunmasını ve yazılar arasında seçim yapılmasını kolaylaştırır. Sütun sayısı, boşluk ve minimum genişlik kararlarını bu amaca göre vermek, daha az özel kuralla daha tutarlı bir kategori sayfası oluşturmanızı sağlar.
