CSS Grid ile Modern Layout Tasarımı

CSS Grid Nedir?

CSS Grid Layout (ya da sadece "Grid"), iki boyutlu grid sistemi sunan bir CSS modülüdür. Flexbox'dan farklı olarak Grid hem satır hem de sütunları aynı anda kontrol etmenizi sağlar:

• İki boyutlu: Hem x hem de y ekseninde kontrol
• Güçlü hizalama: Detaylı pozisyonlama seçenekleri
• Responsive: Medya sorguları olmadan responsive tasarım
• Gap kontrolü: Kolay boşluk yönetimi

Temel Grid Kavramları

Grid Container ve Grid Items

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3 eşit sütun */
  grid-template-rows: 100px 200px; /* 2 satır */
  gap: 20px; /* Boşluklar */
}

.grid-item {
  background-color: #f0f0f0;
  padding: 20px;
}

Grid Lines ve Grid Areas

Grid çizgileri 1'den başlar ve grid'in yapısını tanımlar:

.item1 {
  grid-column-start: 1;
  grid-column-end: 3; /* 1. ve 2. sütunu kaplar */
  grid-row-start: 1;
  grid-row-end: 2;
}

/* Kısa yazım */
.item1 {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
  /* veya */
  grid-area: 1 / 1 / 2 / 3; /* row-start / col-start / row-end / col-end */
}

Grid Template Areas

En güçlü özelliklerden biri template areas ile görsel layout tanımlama:

.layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main aside"
    "footer footer footer";
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  gap: 20px;
}

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

Fractional Units (fr)

CSS Grid'in en kullanışlı özelliklerinden biri fr birimi:

/* Eşit sütunlar */
grid-template-columns: 1fr 1fr 1fr;

/* Farklı oranlar */
grid-template-columns: 2fr 1fr 1fr; /* 50% 25% 25% */

/* Karışık birimler */
grid-template-columns: 200px 1fr 100px; /* Sabit + esnek + sabit */

/* Minimum ve maksimum */
grid-template-columns: repeat(3, minmax(200px, 1fr));

Auto-Fit vs Auto-Fill

Responsive grid'ler için kritik fark:

/* auto-fill: Boş sütunlar tutar */
.grid-auto-fill {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

/* auto-fit: Boş sütunları daraltır */
.grid-auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

Grid vs Flexbox

Özellik	CSS Grid	Flexbox
Boyut	İki boyutlu (2D)	Tek boyutlu (1D)
Kullanım Alanı	Sayfa layout'ları	Komponent layout'ları
İçerik	Layout-first	Content-first
Pozisyonlama	Kesin pozisyonlama	Esnek hizalama

Responsive Grid Örnekleri

Card Grid

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  padding: 2rem;
}

.card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  padding: 1.5rem;
}

Holy Grail Layout

.holy-grail {
  display: grid;
  grid-template:
    "header" auto
    "nav" auto
    "main" 1fr
    "aside" auto
    "footer" auto / 1fr;
  min-height: 100vh;
}

@media (min-width: 768px) {
  .holy-grail {
    grid-template:
      "header header header" auto
      "nav main aside" 1fr
      "footer footer footer" auto / 200px 1fr 200px;
  }
}

Masonry Layout

.masonry {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-auto-rows: 10px; /* Küçük artış birimi */
  gap: 20px;
}

.masonry-item {
  /* JavaScript ile yüksekliğe göre grid-row-end hesaplanır */
}

/* JavaScript ile */
function resizeGridItem(item) {
  const grid = document.querySelector('.masonry');
  const rowHeight = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-auto-rows'));
  const rowGap = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-row-gap'));
  const rowSpan = Math.ceil((item.scrollHeight + rowGap) / (rowHeight + rowGap));
  item.style.gridRowEnd = `span ${rowSpan}`;
}

Gelişmiş Grid Teknikleri

Subgrid (Grid Level 2)

.parent-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.child-grid {
  display: grid;
  grid-column: span 2;
  grid-template-columns: subgrid; /* Parent'ın sütunlarını inherit eder */
  gap: inherit;
}

Container Queries ile Grid

@container (min-width: 400px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@container (min-width: 600px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

Grid Animation

.grid-item {
  transition: all 0.3s ease;
}

.grid-item:hover {
  transform: scale(1.05);
  grid-column: span 2; /* Animasyonlu genişleme */
}

/* Grid gap animasyonu */
.grid-container {
  transition: gap 0.3s ease;
}

.grid-container:hover {
  gap: 30px;
}

Performance ve Best Practices

• Layout thrashing'i önleyin: CSS transforms kullanın
• GPU acceleration: will-change: transform ekleyin
• Implicit grid: grid-auto-rows ve grid-auto-columns belirtin
• Accessibility: grid-area ile DOM sırasını değiştirmeyin
• Fallback: Eski tarayıcılar için Flexbox fallback sağlayın

Debugging Grid

Grid'i debug etmek için Chrome DevTools grid inspector'ı kullanın:

/* Development için grid çizgilerini göster */
.grid-container {
  background-image: 
    linear-gradient(rgba(255,0,0,0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,0,0,0.1) 1px, transparent 1px);
  background-size: 20px 20px;
}

Real-World Grid Patterns

E-ticaret Product Grid

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
  padding: 2rem;
}

.featured-product {
  grid-column: span 2;
  grid-row: span 2;
}

@media (max-width: 768px) {
  .featured-product {
    grid-column: span 1;
    grid-row: span 1;
  }
}

Sonuç

CSS Grid, modern web tasarımının temel taşlarından biridir. Flexbox ile birlikte kullanıldığında, her türlü layout ihtiyacını karşılayabilir. Grid'i layout için, Flexbox'ı ise komponent içi hizalama için kullanmak en iyi yaklaşımdır.

Web Studio TR'de sunduğumuz Frontend Geliştirme kurslarında CSS Grid'in tüm özelliklerini uygulamalı projelerle öğrenebilir, modern web tasarımı becerilerinizi geliştirebilirsiniz.