CSS Grid Layout: Modern Sayfa Düzeni Rehberi

CSS Grid Layout: Modern Sayfa Düzeni Rehberi

CSS Grid Layout, iki boyutlu düzenleme sistemiyle web sayfalarının yapısını kökten değiştirdi. Satır ve sütunları aynı anda kontrol edebilme yeteneği, daha önce JavaScript veya karmaşık CSS hack'leri gerektiren düzenleri birkaç satır kodla mümkün kılıyor. Bu rehberde CSS Grid'in temellerinden ileri seviye tekniklerine kadar her şeyi pratik örneklerle keşfedeceğiz.

1. Grid Temelleri: Container ve Track'ler

Grid sistemi, bir container elemana display: grid tanımlayarak başlar. Ardından grid-template-columns ve grid-template-rows ile satır ve sütun yapısını tanımlarsınız. fr birimi, kullanılabilir alanı orantılı olarak dağıtır ve Grid'in en güçlü özelliklerinden biridir.

/* Temel Grid Tanımı */
.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 3 sütun: 1/4, 2/4, 1/4 oranında */
  grid-template-rows: auto 1fr auto;  /* Header, Content, Footer */
  gap: 1.5rem;                         /* Satır ve sütun boşluğu */
  min-height: 100vh;
}

/* repeat() ile tekrarlayan yapı */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 eşit sütun */
  gap: 2rem;
  padding: 2rem;
}

/* minmax() ile esnek sütunlar */
.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

/* Sabit + Esnek sütun kombinasyonu */
.sidebar-layout {
  display: grid;
  grid-template-columns: 250px 1fr; /* Sabit sidebar + esnek içerik */
  gap: 2rem;
}

2. Grid Area ve Template ile Sayfa Düzeni

CSS Grid'in en etkileyici özelliklerinden biri grid-template-areas ile görsel bir harita oluşturabilmenizdir. Bu yöntemle sayfa düzeninizi ASCII art gibi tanımlayabilir, karmaşık layoutları son derece okunabilir şekilde kodlayabilirsiniz.

/* Grid Template Areas ile Dashboard Layout */
.dashboard {
  display: grid;
  grid-template-areas:
    "header  header  header"
    "sidebar main    aside"
    "sidebar footer  footer";
  grid-template-columns: 240px 1fr 300px;
  grid-template-rows: 64px 1fr 48px;
  min-height: 100vh;
  gap: 0;
}

.dashboard-header  { grid-area: header; }
.dashboard-sidebar { grid-area: sidebar; }
.dashboard-main    { grid-area: main; }
.dashboard-aside   { grid-area: aside; }
.dashboard-footer  { grid-area: footer; }

/* Responsive: Mobilde tek sütun */
@media (max-width: 768px) {
  .dashboard {
    grid-template-areas:
      "header"
      "main"
      "sidebar"
      "aside"
      "footer";
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
}

3. Grid Item Yerleştirme ve Span

Grid item'ları belirli satır ve sütun çizgilerine yerleştirebilir veya birden fazla hücreyi kaplayacak şekilde genişletebilirsiniz. Bu özellik, magazin tarzı düzenlemeler ve karmaşık dashboard tasarımları için idealdir.

/* Çizgi bazlı yerleştirme */
.featured-article {
  grid-column: 1 / 3;  /* 1. çizgiden 3. çizgiye: 2 sütun kapla */
  grid-row: 1 / 3;     /* 1. çizgiden 3. çizgiye: 2 satır kapla */
}

/* span ile kaplama */
.wide-card {
  grid-column: span 2; /* 2 sütun kapla */
}

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

/* Negatif çizgi numaraları */
.full-width-banner {
  grid-column: 1 / -1; /* İlk çizgiden son çizgiye: tam genişlik */
}

/* Magazin Layout */
.magazine-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: 1rem;
}

.magazine-grid .hero {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

.magazine-grid .highlight {
  grid-column: 3 / 5;
}

.magazine-grid .standard {
  /* Otomatik yerleşim — Grid akışına bırak */
}

4. Subgrid ve İleri Seviye Teknikler

CSS Subgrid, iç içe grid'lerin ana grid'in çizgilerini miras almasını sağlar. Bu özellik, özellikle card listelerinde başlıkların ve butonların aynı hizada olmasını garantiler. Ayrıca grid-auto-flow: dense ile boşlukları otomatik doldurabilirsiniz.

/* Subgrid — İç içe hizalama */
.card-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.card {
  display: grid;
  grid-template-rows: subgrid; /* Ana grid satırlarını miras al */
  grid-row: span 3; /* Başlık, içerik, buton — 3 satır */
}

/* Dense packing — Boşlukları doldur */
.masonry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-flow: dense;
  gap: 1rem;
}

/* Overlay Grid — Üst üste binen elemanlar */
.hero-section {
  display: grid;
  grid-template: 1fr / 1fr; /* Tek hücre */
}

.hero-section > * {
  grid-area: 1 / 1; /* Tüm çocuklar aynı hücrede */
}

.hero-section .overlay {
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  display: flex;
  align-items: flex-end;
  padding: 2rem;
  color: white;
}

/* Named Lines */
.advanced-layout {
  display: grid;
  grid-template-columns:
    [full-start] minmax(1rem, 1fr)
    [content-start] minmax(0, 70ch)
    [content-end] minmax(1rem, 1fr)
    [full-end];
}

.content { grid-column: content; }
.full-bleed { grid-column: full; }

5. Grid vs Flexbox: Ne Zaman Hangisi?

Grid ve Flexbox rakip değil, tamamlayıcı araçlardır. Genel kural olarak: sayfa düzeni ve iki boyutlu yerleşimler için Grid, tek boyutlu hizalama ve component içi düzenlemeler için Flexbox kullanılır.

/* Grid: Sayfa düzeni */
.page {
  display: grid;
  grid-template-columns: 1fr min(65ch, 100%) 1fr;
}

.page > * {
  grid-column: 2;
}

/* Flexbox: Component içi düzenleme */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* İkisini birlikte kullanma */
.product-page {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}

.product-page .gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.product-page .details {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

Sonuç

CSS Grid Layout, modern web tasarımının en güçlü araçlarından biridir. grid-template-areas ile okunabilir düzenler, auto-fill/auto-fit ile media query gerektirmeyen responsive tasarımlar, subgrid ile mükemmel iç hizalama elde edebilirsiniz. Grid ve Flexbox'ı birlikte kullanarak, daha önce imkansız görünen düzenleri bile kolayca hayata geçirebilirsiniz. Firefox DevTools'un Grid Inspector'ı, öğrenme sürecinizde en büyük yardımcınız olacaktır.

Kaynaklar

• MDN: CSS Grid Layout
• CSS-Tricks: A Complete Guide to Grid
• Grid Garden — Oyunla Öğrenin
• web.dev: Grid
• Grid by Example — Rachel Andrew