CSS Grid ile Modern Sayfa Düzeni Rehberi

CSS Grid, web sayfalarını satır ve sütunlardan oluşan iki boyutlu bir sistemde düzenlemenin en güçlü yoludur. Yıllarca float, tablo ve karmaşık negatif kenar boşluklarıyla uğraştıktan sonra Grid, bir kapsayıcıya birkaç satır yazarak hem dikey hem yatay yerleşimi aynı anda kontrol etmeyi mümkün kıldı. Bu rehberde temel kavramlardan başlayıp gerçek bir sayfa iskeleti kurana kadar adım adım ilerleyeceğiz.

Grid neden Flexbox'tan farklı?

İkisi de modern yerleşim araçlarıdır ama farklı işler için tasarlandılar. Flexbox tek boyutludur: öğeleri ya bir satırda ya da bir sütunda hizalar. CSS Grid ise iki boyutludur: satırları ve sütunları aynı anda tanımlar, böylece bir öğeyi hem yatay hem dikey eksende tam istediğin hücreye yerleştirebilirsin.

Flexbox: navigasyon çubuğu, buton grubu, kart içi içerik gibi tek eksenli akışlar.
Grid: sayfa iskeleti, galeri, dashboard, kart ızgarası gibi gerçek tablo benzeri yapılar.

Pratikte ikisini birlikte kullanırsın: dış iskelet Grid, kartların içi Flexbox olur.

İlk grid: satır ve sütun şablonu

Bir elemana display: grid verdiğinde o eleman bir grid kapsayıcısı, doğrudan çocukları da grid öğeleri olur. Sütunları grid-template-columns, satırları grid-template-rows ile tanımlarsın:

.galeri {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  gap: 16px;
}

Bu kod üç sabit sütun ve aralarında 16px boşluk oluşturur. Ancak sabit piksel değerleri esnek değildir. İşte burada Grid'in en sevdiğim birimi devreye girer: fr (fraction / pay birimi). fr, kullanılabilir alanı oranlara böler:

.galeri {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

Artık üç sütun mevcut genişliği eşit paylaşır. 2fr 1fr 1fr yazsaydın ilk sütun diğerlerinin iki katı geniş olurdu.

repeat(), minmax() ve gerçek esneklik

Aynı değeri tekrar tekrar yazmak yerine repeat() fonksiyonunu kullan. minmax() ise bir sütuna alt ve üst sınır verir. İkisini birleştirince responsive bir ızgara kurarsın:

.kartlar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}

Bu tek satır oldukça güçlüdür. auto-fit ile tarayıcı, her sütun en az 220px olacak şekilde ekrana kaç sütun sığacağını kendisi hesaplar; kalan alanı 1fr sayesinde eşit dağıtır. Sonuç: tek bir media query yazmadan geniş ekranda dört sütun, tablette iki, telefonda tek sütun gösteren bir kart ızgarası.

auto-fit ile auto-fill arasındaki fark inceliklidir: auto-fit boş kalan sütunları daraltıp mevcut öğeleri genişletirken, auto-fill görünmez boş sütunları korur. Çoğu kart düzeni için auto-fit daha doğal görünür.

Adlandırılmış alanlarla sayfa iskeleti

Grid'in en okunaklı özelliği grid-template-areas'dır. Yerleşimi adeta bir ASCII çizimiyle tarif edersin:

.sayfa {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "kenar baslik"
    "kenar icerik"
    "kenar altbilgi";
  min-height: 100vh;
  gap: 16px;
}

.sayfa header  { grid-area: baslik; }
.sayfa aside   { grid-area: kenar; }
.sayfa main    { grid-area: icerik; }
.sayfa footer  { grid-area: altbilgi; }

Bu yapı solda sabit genişlikte bir kenar çubuğu, sağda ise başlık, içerik ve alt bilgiden oluşan klasik bir uygulama düzeni kurar. Mobilde tek sütuna geçmek için sadece şablonu yeniden tanımlaman yeterli:

@media (max-width: 760px) {
  .sayfa {
    grid-template-columns: 1fr;
    grid-template-areas:
      "baslik"
      "icerik"
      "altbilgi"
      "kenar";
  }
}

HTML'e dokunmadan, sadece şablonu değiştirerek kenar çubuğunu en alta taşıdık. İşte Grid'in bakım kolaylığı tam olarak bu.

Öğeleri çizgi numaralarıyla yerleştirmek

Grid çizgileri 1'den başlayarak numaralandırılır. Bir öğenin kaç sütun veya satır kaplayacağını grid-column ve grid-row ile belirlersin:

.one-cikan {
  grid-column: 1 / 3;   /* 1. çizgiden 3. çizgiye: iki sütun kaplar */
  grid-row: 1 / 2;
}

span anahtar sözcüğü daha okunaklıdır: grid-column: span 2; öğenin bulunduğu yerden iki sütun kaplamasını söyler. Hücreleri hizalamak için justify-items (yatay) ve align-items (dikey) kullanılır; tek bir öğeyi ayrı hizalamak istersen justify-self ve align-self vardır.

Sık yapılan hatalar

Her şeye Grid kullanmak: tek satırlık bir menü için Flexbox daha sade kalır.
Sabit yükseklik vermek: satırlarda auto bırak; içeriğe göre büyümesine izin ver.
gap yerine margin kullanmak: Grid'in gap özelliği boşlukları kenarlara taşmadan, tutarlı bir şekilde yönetir.
auto-fit / auto-fill karıştırmak: beklenmedik boş sütunlar görüyorsan büyük olasılıkla yanlış olanı seçmişsindir.

Sık Sorulan Sorular

CSS Grid'i hangi tarayıcılar destekler?

Tüm modern tarayıcılar (Chrome, Firefox, Safari, Edge) yıllardır CSS Grid'i tam olarak destekler. Eski Internet Explorer dışında pratikte bir uyumluluk endişesi kalmadı; günümüz projelerinde rahatça üretimde kullanabilirsin.

Grid mi Flexbox mı kullanmalıyım?

İçeriğini iki eksende (hem satır hem sütun) düzenliyorsan Grid; tek bir eksende sıralıyorsan Flexbox. Çoğu gerçek projede ikisi iç içe çalışır: dış iskelet Grid, bileşen içi hizalamalar Flexbox olur.

fr birimi yüzde işaretinden daha mı iyi?

Genelde evet. fr, gap boşluklarını otomatik hesaba katarak kalan alanı paylaştırır; yüzdelerle boşlukları elle çıkarman gerekir. Bu yüzden Grid içinde oranlar için fr daha güvenli ve temiz bir tercihtir.

Projende Grid tabanlı, hızlı ve responsive bir arayüze mi ihtiyacın var? Modern CSS ile bakımı kolay, temiz düzenler kuruyorum. Fikrini konuşmak için benimle iletişime geç.