# CSS Grid vs Flexbox

Adres: https://softwaredictionary.org/tr/karsilastirma/css-grid-vs-flexbox
Son güncelleme: 2026-09-30

Kısaca: CSS Grid öğeleri iki boyutta, satır ve sütunlara aynı anda yerleştirir; Flexbox ise onları tek bir satır ya da sütun boyunca dizer, bileşen içinde idealdir.

## CSS Grid ile Flexbox arasındaki fark nedir?

CSS Grid ve Flexbox, `display: grid` ve `display: flex` ile açılan iki CSS yerleşim sistemidir. Grid bir kapsayıcıyı satır ve sütunlara böler ve öğeleri oluşan hücrelere yerleştirir. Flexbox ise öğeleri yatay ya da dikey tek bir çizgi üzerinde dizer; nasıl büyüyeceklerini, küçüleceklerini ve hizalanacaklarını denetler.

Temel fark, iki boyut ile bir boyuttur. Grid önce yerleşimi düşünür: `grid-template-columns: 1fr 2fr` gibi izleri (track) siz tanımlarsınız ve öğeler iki yönde de hizalanır. Flexbox önce içeriği düşünür: öğeler kendi boyutlarını belirler, kapsayıcı da artan alanı tek eksen boyunca paylaştırır.

İkisi birlikte kullanılmak üzere tasarlanmıştır. Tipik bir sayfa genel yapı (üst bilgi, kenar çubuğu, ana içerik) için Grid'i, gezinme çubuğu ya da bir düğme sırası gibi bileşenlerin içinde ise Flexbox'ı kullanır. İkisi de `justify-content`, `align-items` ve `gap` gibi aynı hizalama özelliklerini paylaşır.

Sık yapılan bir yanlış, Grid'in Flexbox'ın yerini aldığı düşüncesidir. Flexbox birkaç satıra sarabilir, ama her satır kendi başına yerleştirilir; bu yüzden farklı satırlardaki öğeler sütun gibi hizalanmaz. Bu hizalamaya ihtiyaç duyduğunuzda doğru araç Grid'dir, duymadığınızda ise Flexbox çoğu zaman daha basittir.

| Özellik | CSS Grid | Flexbox |
| --- | --- | --- |
| Boyut | İki: satırlar ve sütunlar aynı anda | Bir: tek bir satır ya da tek bir sütun |
| Yaklaşım | Önce yerleşim: izleri tanımla, sonra öğeleri yerleştir | Önce içerik: öğeler kendi boyutlarını belirler, alan paylaştırılır |
| Satırlar arası hizalama | Öğeler hem satırlarda hem sütunlarda hizalanır | Sarılan her satır bağımsız hizalanır |
| Temel özellikler | `grid-template-columns`, `grid-template-areas`, `grid-column` | `flex-direction`, `flex-wrap`, `flex-grow`, `flex-basis` |
| Yerleştirme | Öğeler belirli hücrelere yayılabilir ya da üst üste binebilir | Öğeler çizgi boyunca birbirini izler |
| En uygun olduğu yer | Sayfa yerleşimleri, galeriler, panolar ve kart ızgaraları | Gezinme çubukları, araç çubukları, düğme grupları ve ortalama |

## CSS Grid şu durumlarda doğru seçim

- Öğelerin hem satırlarda hem sütunlarda hizalanması gerekiyor.
- Sayfanın genel yapısını kuruyorsunuz.
- Yerleşim önce tanımlanıyor, içerik onu dolduruyor.
- Öğelerin belirli alanlara yayılması ya da üst üste binmesi gerekiyor.

## Flexbox şu durumlarda doğru seçim

- Öğeler tek bir satırda ya da sütunda duruyor.
- Öğe boyutları içeriklerine uyum sağlamalı.
- Birkaç öğeyi aralamanız veya ortalamanız gerekiyor.

## Sık sorulan sorular

**Grid mi kullanmalıyım, Flexbox mı?**

Satırları ve sütunları birlikte denetlemeniz gerektiğinde Grid'i, öğeler tek yönde aktığında Flexbox'ı kullanın. Gerçek yerleşimlerin çoğu ikisini de kullanır: yapı için Grid, bileşenlerin içinde Flexbox.

**CSS Grid, Flexbox'tan daha mı zor öğrenilir?**

Grid'in daha çok özelliği var, ama `display: grid` ve `grid-template-columns` gibi temeller çabuk öğrenilir. Birçok geliştirici, kavramı daha az olduğu için Flexbox ile başlar.

**Grid'in içinde Flexbox kullanılabilir mi?**

Evet. Her grid öğesi kendisi bir flex kapsayıcısı olabilir, tersi de mümkündür; ikisinin en yaygın birleştirilme biçimi budur.

---

Software Dictionary: https://softwaredictionary.org/tr · https://softwaredictionary.org/tr/llms.txt