Yan yana

CSS GridvsFlexbox

Q: 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.

CSS Grid ile Flexbox arasındaki fark nedir?

Güncellendi 30 Eylül 20262 dk okuma6 fark

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.

Web Geliştirmes. 12

CSS Grid

CSS Grid, öğeleri aynı anda satır ve sütunlar halinde düzenleyen, karmaşık sayfa yerleşimlerini kolayca kurmayı sağlayan iki boyutlu CSS yerleşim sistemidir.

CSS Grid sayfasını oku

Web Geliştirmes. 17

Flexbox

CSS Esnek Kutu Yerleşimi

Flexbox, öğeleri tek bir satır ya da sütunda düzenleyen ve büyüme, küçülme, hizalama ile boş alanı paylaşma biçimlerini denetleyen bir CSS yerleşim modelidir.

Flexbox sayfasını oku

CSS Grid ve Flexbox karşılaştırması

Ö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

Fark, açıklamalı

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.

Hangisini kullanmalısınız?

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.

Grid ile galeri, Flexbox ile gezinme çubuğu

CSS Gridcss

/* Grid: three equal columns, rows added as needed */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.gallery .featured {
  grid-column: span 2; /* take two columns */
}

Flexboxcss

/* Flexbox: one row with space between items */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.navbar .search {
  flex-grow: 1; /* take the leftover space */
}

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.