CSS Grid ile Duyarlı Sayfa Düzeni Kurmak

Bir web sayfasında kartları yan yana dizmek, kenar çubuğu eklemek ya da telefonda her şeyi alt alta getirmek eskiden epey uğraştırırdı. CSS Grid ile bunların çoğu birkaç satıra iniyor. Bu yazıda Grid'in temel mantığını öğrenip telefonda tek sütun, bilgisayarda üç sütun olan bir düzeni adım adım kuracağız.

Grid nedir?

CSS Grid, sayfayı satırlar ve sütunlardan oluşan bir ızgaraya bölmeni sağlayan bir düzen sistemidir. Bir kutuya display: grid dediğinde, onun içindeki öğeler bu ızgaranın hücrelerine yerleşir. Flexbox tek yönde (ya satır ya sütun) çalışırken Grid aynı anda iki yönü birden yönetebilir.

Kabaca şöyle düşünebilirsin: Elemanları bir sıraya dizeceksen Flexbox, bir tablo gibi yerleştireceksen Grid.

İlk ızgaranı oluştur

Elimizde altı kart olsun. Önce HTML:

<div class="izgara">
  <article class="kart">1</article>
  <article class="kart">2</article>
  <article class="kart">3</article>
  <article class="kart">4</article>
  <article class="kart">5</article>
  <article class="kart">6</article>
</div>

Şimdi bu kapsayıcıyı üç eşit sütunlu bir ızgaraya çevirelim:

.izgara {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

• grid-template-columns sütunları tanımlar.
• repeat(3, 1fr), "üç tane 1fr genişliğinde sütun" demektir. fr (fraction, yani pay) birimi, kalan alanı eşit paylara böler.
• gap kartlar arasındaki boşluktur. Kenar boşluklarıyla (margin) tek tek uğraşmana gerek kalmaz.

Sorun şu: Bu düzen telefonda da üç sütun olur ve kartlar çok daralır.

Medya sorgusu yazmadan duyarlı düzen

Grid'in en sevilen özelliklerinden biri, ekrana göre sütun sayısını kendiliğinden ayarlayabilmesidir:

.izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 1.5rem;
}

Bu satırı parça parça okuyalım:

1. minmax(300px, 1fr): Her sütun en az 300px olsun, yer varsa eşit şekilde genişlesin.
2. auto-fill: Kaç sütun sığıyorsa o kadar oluştur.
3. min(100%, 300px): Ekran 300px'ten darsa kart taşmasın, ekran genişliğini kullansın.

Sonuç: Telefonda 1, tablette 2, bilgisayarda 3 sütun. Üstelik tek bir medya sorgusu yazmadın. Zenka Dijital'deki yazı kartları da tam olarak bu yöntemle diziliyor.

Alanlara isim vermek: grid-template-areas

Sayfanın genel iskeletini kurarken alanlara isim vermek kodu çok okunaklı yapar:

.sayfa {
  display: grid;
  gap: 1rem;
  grid-template-areas:
    "ust"
    "icerik"
    "kenar"
    "alt";
}

/* 1024px ve üstü: kenar çubuğu içeriğin sağına geçsin */
@media (min-width: 1024px) {
  .sayfa {
    grid-template-columns: 1fr 300px;
    grid-template-areas:
      "ust    ust"
      "icerik kenar"
      "alt    alt";
  }
}

.sayfa-ust    { grid-area: ust; }
.sayfa-icerik { grid-area: icerik; }
.sayfa-kenar  { grid-area: kenar; }
.sayfa-alt    { grid-area: alt; }

Telefonda her şey alt alta, bilgisayarda kenar çubuğu sağda. Düzeni değiştirmek için HTML'e hiç dokunmadın, sadece "haritayı" yeniden çizdin.

Sık yapılan hatalar

• Grid'i çocuklara vermek: display: grid kartlara değil, kartları saran kapsayıcıya yazılır.
• Sabit genişlik kullanmak: grid-template-columns: 300px 300px 300px telefonda taşar. fr ve minmax() kullan.
• Görsel sırayı değiştirip HTML sırasını unutmak: Grid ile öğelerin yerini değiştirebilirsin ama ekran okuyucular ve klavye HTML sırasını takip eder. Mantıklı sıralamayı HTML'de koru.

Özet

CSS Grid'e başlamak için üç şey yeterli: display: grid, grid-template-columns ve gap. Bunlara repeat(auto-fill, minmax(...)) kalıbını eklediğinde, çoğu kart listesi için medya sorgusuna bile ihtiyacın kalmaz. Bir sonraki projende kartlarını bu yöntemle dizmeyi dene.