CSS Grid Layout: Modern Sayfa Düzeni Oluşturma

CSS Grid Layout, web sayfalarında iki boyutlu düzenler oluşturmak için tasarlanmış en güçlü CSS modülüdür. Hem satır hem de sütun kontrolünü aynı anda sağlayarak, karmaşık sayfa yapılarını minimum kodla oluşturmanıza olanak tanır. Flexbox tek boyutlu düzenler için idealken, Grid iki boyutlu düzenlerin tartışmasız kralıdır.

Grid Temelleri

Grid sistemi, bir container ve onun içindeki item'lardan oluşur:

.grid-container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  gap: 20px;
}

Bu kod, üç sütunlu bir düzen oluşturur: sol ve sağ kenar çubukları sabit 200px genişliğinde, ortadaki içerik alanı kalan boşluğu doldurur.

grid-template-columns ve grid-template-rows

Bu iki özellik, grid yapısının iskeletini tanımlar:

/* Sabit boyutlu sütunlar */
grid-template-columns: 100px 200px 100px;

/* Esnek sütunlar (fr birimi) */
grid-template-columns: 1fr 2fr 1fr;

/* Karışık kullanım */
grid-template-columns: 250px 1fr;

/* Tekrarlı sütunlar */
grid-template-columns: repeat(3, 1fr);

/* Otomatik boyutlu satırlar */
grid-template-rows: auto 1fr auto;

fr Birimi Nedir?

fr (fraction — kesir) birimi, kullanılabilir alanın bir payını temsil eder. Grid'e özgü bu birim, esnek düzenler oluşturmanın en temiz yoludur:

/* Üç eşit sütun */
grid-template-columns: 1fr 1fr 1fr;

/* Ortadaki sütun iki kat geniş */
grid-template-columns: 1fr 2fr 1fr;

/* Sabit kenar + esnek orta */
grid-template-columns: 300px 1fr;

fr birimi, yüzde kullanımından farklı olarak gap değerini otomatik hesaba katar. Yani gap: 20px tanımladığınızda fr birimleri kalan alana göre hesaplanır.

gap: Izgara Boşlukları

Grid elemanları arasındaki boşluğu gap ile tanımlarsınız:

.grid-container {
  gap: 20px;           /* Satır ve sütun arası eşit */
  row-gap: 20px;       /* Sadece satır arası */
  column-gap: 30px;    /* Sadece sütun arası */
  gap: 20px 30px;      /* Satır: 20px, sütun: 30px */
}

Grid Areas: İsimli Alanlar

Grid'in en güçlü özelliklerinden biri, alanları isimlendirerek görsel bir harita oluşturabilmenizdir:

.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 60px 1fr 50px;
  grid-template-areas:
    "header  header"
    "sidebar content"
    "footer  footer";
  gap: 10px;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer  { grid-area: footer; }

Bu yaklaşım, sayfa düzenini CSS'te adeta çizerek oluşturmanızı sağlar. Responsive tasarımda media query ile grid-template-areas değerini değiştirmek yeterlidir.

auto-fit ve auto-fill ile Responsive Grid

Media query yazmadan responsive grid oluşturmanın en etkili yolu auto-fit ve auto-fill kullanmaktır:

/* Elemanlar en az 250px, kalan alanı eşit paylaşır */
.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

İkisi arasındaki fark:

• auto-fit: Boş sütunları daraltır, mevcut elemanlar alanı doldurur
• auto-fill: Boş sütunları korur, elemanlar orijinal boyutlarında kalır

Çoğu durumda auto-fit tercih edilir çünkü elemanlar mevcut alanı tam olarak kullanır.

Grid Item Yerleştirme

Her grid item'ın konumunu ve kapladığı alanı belirleyebilirsiniz:

.item {
  grid-column: 1 / 3;    /* 1. sütun çizgisinden 3.'ye kadar */
  grid-row: 1 / 2;       /* 1. satır çizgisinden 2.'ye kadar */
}

/* Kısayol: span kullanımı */
.wide-item {
  grid-column: span 2;   /* 2 sütun kapla */
}

.tall-item {
  grid-row: span 3;      /* 3 satır kapla */
}

Pratik Örnek: Holy Grail Layout

Web tasarımının klasik "Holy Grail" düzenini Grid ile oluşturmak çok kolaydır:

.holy-grail {
  display: grid;
  grid-template: auto 1fr auto / 200px 1fr 200px;
  grid-template-areas:
    "header header  header"
    "nav    content aside"
    "footer footer  footer";
  min-height: 100vh;
  gap: 16px;
}

/* Mobil düzen */
@media (max-width: 768px) {
  .holy-grail {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "nav"
      "content"
      "aside"
      "footer";
  }
}

Grid Ne Zaman Kullanılmalı?

• Tam sayfa düzenleri (header, sidebar, content, footer)
• Kart galeri ve portfolio grid'leri
• Dashboard panelleri
• Resim galerileri (özellikle farklı boyutlu resimler)
• İki boyutlu hizalama gereken her yerde

Tek boyutlu düzenler (bir satır navigasyon, bir sütun liste) için Flexbox daha pratiktir. En iyi sonuç, Grid ve Flexbox'ı birlikte kullanmakla elde edilir.