Modern web tasarımlarında sayfa düzeni (layout) oluşturmak artık sadece “görsellik” değil, aynı zamanda kullanıcı deneyimi açısından da çok önemli bir unsur hâline geldi. Geliştiriciler yıllarca float, table, ardından flexbox gibi çözümlerle karmaşık yapı

Modern web tasarımlarında sayfa düzeni (layout) oluşturmak artık sadece “görsellik” değil, aynı zamanda kullanıcı deneyimi açısından da çok önemli bir unsur hâline geldi. Geliştiriciler yıllarca float, table, ardından flexbox gibi çözümlerle karmaşık yapıları oluşturmak için çeşitli yöntemlere başvurdu. Ancak özellikle iki boyutlu (2D) yerleşimlerde bu çözümler yetersiz kalabiliyor.

İşte tam bu noktada CSS Grid teknolojisi devreye giriyor. CSS Grid, hem yatay (satır) hem de dikey (sütun) eksende düzen kurmamıza olanak sağlayarak daha sade, okunabilir ve esnek tasarımlar geliştirmemizi mümkün kılıyor.

Bu yazıda CSS Grid’in temellerini, nasıl çalıştığını ve basit bir modern layout’u nasıl oluşturabileceğimizi örneklerle öğreneceğiz.

---

CSS Grid Nedir?

CSS Grid, 2017’den itibaren modern tarayıcılar tarafından desteklenen bir 2 boyutlu yerleşim sistemidir. Diğer layout sistemlerinden en büyük farkı, hem satır hem sütun bazlı düzen kurabilmesidir. Flexbox, tek boyutlu (ya satır ya sütun) çalışırken, Grid ikisini birden aynı anda yönetebilir.

Grid Sistemi Nasıl Tanımlanır?

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3 sütun */
  grid-template-rows: auto;          /* satır yüksekliği otomatik */
  gap: 20px;                          /* boşluklar */
}

Bu temel yapı ile container içerisine yerleştirilen her eleman 3 sütunlu bir düzene göre hizalanır.

---

Küçük Bir Grid Layout Örneği

HTML:

<div class="container">
  <div class="kutu">1</div>
  <div class="kutu">2</div>
  <div class="kutu">3</div>
  <div class="kutu">4</div>
</div>

CSS:

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 sütun */
  gap: 10px;
}

.kutu {
  background-color: #4CAF50;
  color: white;
  padding: 20px;
  text-align: center;
}

Bu yapı sayesinde 4 kutu, otomatik olarak 2'ye 2 bir grid içinde hizalanır. Responsive tasarımlarda sütun sayısını media query ile artırıp azaltmak da oldukça kolaydır.

---

Grid Alanlarını Yönetmek

Grid sistemi, sadece otomatik hizalama değil, aynı zamanda manuel yerleşim de sağlar.

.kutu1 {
  grid-column: 1 / span 2; /* 1. sütundan başla, 2 sütun kapla */
}

Bu şekilde daha karmaşık yapılar, örneğin header, sidebar, content, footer gibi bölümler kolayca tanımlanabilir.

---

Responsive Tasarımda CSS Grid Kullanımı

CSS Grid, mobil uyumlu tasarımlar için de idealdir. Örneğin:

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr; /* tek sütun - mobil */
  }
}

Bu sayede mobilde tüm öğeler alt alta sıralanırken, masaüstünde sütun yapısı korunur. Grid yapısının bu esnekliği sayesinde kod tekrarına gerek kalmadan farklı ekranlara uygun tasarım elde edilebilir.

---

CSS Grid vs Flexbox

Özellik	CSS Grid	Flexbox
Boyut	2D (satır + sütun)	1D (tek eksen)
Karmaşık Yapılar	Uygun	Zorlaşabilir
Responsive	Çok esnek	Esnek
Öğeleri yerleştirme	Hassas kontrol	Sıralamaya göre

Flexbox hâlâ geçerli ve güçlü bir sistemdir, ancak karmaşık sayfa düzenleri söz konusu olduğunda CSS Grid daha iyi sonuçlar sunar.

CSS Grid, özellikle şu gibi durumlarda oldukça etkilidir:

• Dashboard (panel) tasarımları

• Blog ya da dergi sayfa düzenleri

• Galeri ve portföy siteleri

• Admin panelleri ve data tabloları

Kısacası; sayfa yerleşimini iki boyutta kontrol etmek istediğiniz her yerde CSS Grid devreye girer. Daha az kodla, daha çok esneklik sağlayarak modern ve profesyonel tasarımların kapısını aralar.