CSS Grid Layout, modern web tasarımında iki boyutlu (satır ve sütun bazlı) düzen oluşturmayı sağlayan güçlü bir yerleşim sistemidir. Grid yapısı; bir grid container (ızgara kapsayıcı) ve onun içindeki grid item (ızgara öğeleri) mantığıyla çalışır. Bu yapı sayesinde karmaşık sayfa düzenleri, temiz ve okunabilir CSS kodları ile kolayca oluşturulabilir.
1️⃣ Grid Container Tanımı
Bir yapıyı grid sistemine dahil etmek için öncelikle kapsayıcı elemana display: grid; özelliği verilir.
.container {
display: grid;
}
Bu tanımlama ile ilgili HTML elementi artık bir grid container olur ve içerisindeki doğrudan çocuk elemanlar otomatik olarak grid item haline gelir.
2️⃣ Sütunların Tanımlanması: grid-template-columns
Sütun yapısını belirlemek için grid-template-columns özelliği kullanılır.
Örnek:
.container {
display: grid;
grid-template-columns: 100px 1fr 2fr;
}
Açıklama:
- 100px → İlk sütun sabit genişliktedir.
- 1fr → İkinci sütun kalan alanın 1 birimini alır.
- 2fr → Üçüncü sütun kalan alanın 2 birimini alır.
🔎 fr Birimi Nedir?
fr (fraction) birimi, kalan boş alanı oranlı şekilde paylaştırır.
Yukarıdaki örnekte:
- Toplam boş alan 3 parçaya bölünür (1fr + 2fr = 3fr)
- 1fr → %33
- 2fr → %66
Bu yapı sayesinde responsive (duyarlı) tasarımlar kolayca oluşturulabilir.
3️⃣ Satırların Tanımlanması: grid-template-rows
Satır yapısını belirlemek için grid-template-rows kullanılır.
.container {
display: grid;
grid-template-rows: 100px auto 100px;
}
Açıklama:
- 100px → Üst satır sabit yükseklik
- auto → İçeriğe göre otomatik yükseklik
- 100px → Alt satır sabit yükseklik
🔎 auto Nedir?
auto değeri, içeriğin yüksekliğine göre satır boyutunu otomatik belirler.
4️⃣ Grid Yapısının Genel Mantığı
Örnek tam yapı:
.container {
display: grid;
grid-template-columns: 100px 1fr 2fr;
grid-template-rows: 100px auto 100px;
}
Bu yapı:
- 3 sütunlu
- 3 satırlı
- Esnek genişlik dağılımına sahip
- Üst ve alt sabit, orta esnek satırdan oluşan
profesyonel bir grid sistemi oluşturur.
5️⃣ Grid Tracks Nedir?
Track, grid içerisindeki her bir satır ve sütun çizgisi arasındaki alanı ifade eder.
- Sütun track = column track
- Satır track = row track
Yani yukarıdaki örnekte:
- 3 column track
- 3 row track
- Toplam 9 grid hücresi (cell)
6️⃣ CSS Grid Kullanımının Avantajları
✅ İki boyutlu yerleşim kontrolü
✅ Karmaşık layoutları sade kodla oluşturma
✅ Responsive tasarım kolaylığı
✅ Oranlı alan paylaşımı (fr)
✅ İçeriğe duyarlı satır yapısı (auto)
7️⃣ Profesyonel Kullanım Örneği (Gerçek Senaryo)
Örneğin bir web sayfasında:
- Sol sabit sidebar (100px)
- Orta içerik alanı (esnek)
- Sağ reklam alanı (daha geniş esnek)
- Üst header (100px)
- Orta içerik (auto)
- Alt footer (100px)
Grid bu düzeni tek kapsayıcı ile kolayca kurmamızı sağlar.
8️⃣ Özet
CSS Grid ile:
display: grid;→ Grid sistemi başlatılır.grid-template-columns→ Sütun yapısı tanımlanır.grid-template-rows→ Satır yapısı belirlenir.fr→ Kalan alan oranlı dağıtılır.auto→ İçeriğe göre boyutlanır.
Modern web tasarımında Grid, Flexbox ile birlikte en güçlü layout araçlarından biridir. Özellikle iki boyutlu tasarımlar için Grid tercih edilmelidir.
