CSS Grid, modern web tasarımında iki boyutlu (satır + sütun) düzen oluşturmak için kullanılan güçlü bir layout sistemidir. Grid yapısında ilk adım container (kapsayıcı) tanımlamaktır.

Bir elementi grid konteyner yapmak için display özelliği kullanılır.

1️⃣ display Özelliği

Grid sistemini başlatan temel özelliktir.

.container {
  display: grid;
}

🔹 display: grid;

• Yeni bir grid formatting context oluşturur.
• İçindeki tüm doğrudan çocuk elemanlar grid item olur.
• Blok seviyesinde davranır.

.container {
  display: inline-grid;
}

🔹 display: inline-grid;

• Grid yapısı oluşturur.
• Ancak container inline element gibi davranır.
• İçerik kadar yer kaplar.

.container {
  display: subgrid;
}

🔹 display: subgrid;

• Parent grid’in satır ve sütun yapısını miras alır.
• Özellikle kompleks layout’larda kullanılır.
• Nested grid yapılarında hizalama problemlerini çözer.

Not: Subgrid desteği modern tarayıcılarda mevcuttur ancak eski sürümlerde desteklenmeyebilir.

2️⃣ grid-template Özelliği

Grid’in satır ve sütun yapısını tanımlar.

🔹 grid-template-columns

Sütunları tanımlar.

🔹 grid-template-rows

Satırları tanımlar.

📌 Sabit Ölçü Örneği

.container {
  display: grid;
  grid-template-columns: 12px 12px 12px;
  grid-template-rows: 12px 12px 12px;
}

Bu yapı:

• 3 sütun
• 3 satır
• Her biri 12px

📌 repeat() Fonksiyonu Kullanımı

.container {
  display: grid;
  grid-template-columns: repeat(3, 12px);
  grid-template-rows: repeat(3, auto);
}

Avantajları:

• Kod tekrarını azaltır
• Daha okunabilir yapı sağlar
• Responsive tasarımlarda kolaylık sunar

📌 Karışık Ölçü Örneği

.container {
  display: grid;
  grid-template-columns: 8px auto 8px;
  grid-template-rows: 8px auto 12px;
}

Burada:

• Ortadaki alan esnek
• Kenarlar sabit padding benzeri boşluk sağlar

📌 Yüzdelik Grid Yapısı

.container {
  display: grid;
  grid-template-columns: 22% 22% auto;
  grid-template-rows: 22% auto 22%;
}

Bu yapı:

• Responsive tasarım için uygundur
• Orta alan esnek, yan alanlar oransal genişlikte

🎯 Profesyonel Kullanım Stratejileri

1️⃣ Responsive Layout

Grid ile medya sorgusu kullanmadan da esnek yapı kurulabilir:

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

Bu yapı:

• Ekran küçüldükçe kolon sayısını azaltır
• Modern kart tasarımlarında idealdir

2️⃣ Layout Mimari Örneği

Kurumsal web sitesi için tipik yapı:

.container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  grid-template-columns: 250px 1fr;
}

Avantaj:

• Okunabilir
• Yönetilebilir
• Büyük projelerde sürdürülebilir

🔥 Grid vs Flexbox

Özellik	Grid	Flexbox
Boyut	2D	1D
Layout türü	Komple sayfa düzeni	Satır bazlı düzen
Karmaşık tasarım	Daha uygun	Sınırlı
Öğrenme eğrisi	Orta	Kolay

📌 Modern Web Geliştirme Perspektifi

CSS Grid:

• Dashboard tasarımlarında
• Admin panellerinde
• E-ticaret grid yapılarında
• Blog layout sistemlerinde
• Uygulama arayüzlerinde

aktif olarak kullanılmaktadır.

Özellikle React, Vue ve Angular projelerinde Grid, component tabanlı mimarilerle mükemmel uyum sağlar.

🚀 Sonuç

CSS Grid container özellikleri:

• Modern
• Güçlü
• Esnek
• Ölçeklenebilir

Profesyonel projelerde layout yönetimi için artık standart hale gelmiştir.