CSS GRID VE FLEXBOX NEDİR?

Modern bir web sayfası açtığında görünen her menü, kart galerisi, sidebar düzeni ve responsive yerleşim büyük olasılıkla iki teknolojiden birinin üzerine kurulu: Flexbox veya CSS Grid. Frontend geliştiricinin bu iki sistemi rahatça kullanması artık opsiyonel değil — float, table-layout ve mutlak konumlandırma hileleriyle layout yapma dönemi 2017'de kapandı. Yine de pek çok geliştirici hâlâ ikisi arasında ne zaman hangisini seçeceğinden emin değil. Bu yazı, ikisinin de ne yaptığını, nerede güçlü olduğunu ve gerçek projede nasıl birlikte çalıştığını ayırt etmen için bir referans noktasıdır.

Flexbox Nedir?

Flexbox (Flexible Box Layout), W3C tarafından 2009'da tanıtılan ve 2015 civarında yaygın tarayıcı desteğine ulaşan tek boyutlu bir düzen modelidir. "Tek boyutlu" demek, aynı anda yatay veya dikey eksende çalışması demektir — ikisi birden değil.

Bir kapsayıcıya display: flex verdiğinde, içindeki öğeler ana eksen (main axis) boyunca dizilir. Yön flex-direction ile belirlenir: row (yatay) ya da column (dikey). Öğelerin nasıl yayılacağı, hizalanacağı, sıkışacağı ya da genişleyeceği kapsayıcı üzerinden kontrol edilir.

Tipik Flexbox kullanım alanları:

• Navigation bar — menü öğelerini yatay dizmek, sağdan ya da soldan hizalamak
• Kart içinde başlık, açıklama ve buton kümesi düzeni
• Form alanlarında etiket-input yan yana yerleşimi
• Footer'da logo, link grupları ve sosyal medya ikonlarını dengelemek
• Dikey ortalama — klasik "vertical-align" sorununu tek satırda çözer

Flexbox'ın en güçlü yanı içerik odaklı olmasıdır. Öğelerin doğal boyutuna saygı duyar, gerektiğinde esnetir ya da sıkıştırır. flex-grow, flex-shrink ve flex-basis üçlüsü her öğenin nasıl davranacağını ince ayar yapmana izin verir. Resmi özellik tanımları ve kullanım örnekleri için CSS dokümantasyonu ana hub'ı kapsamlı bir referans noktasıdır.

CSS Grid Nedir?

CSS Grid Layout, 2017'de modern tarayıcıların tamamına gelen iki boyutlu bir düzen sistemidir. Aynı anda hem satırları hem sütunları kontrol eder. Flexbox bir hat çizerken, Grid bir matris çizer.

Kapsayıcıya display: grid verip grid-template-columns ve grid-template-rows ile ızgaranın iskeletini tanımlarsın. Öğeler bu ızgaraya yerleştirilir. Hücreleri birleştirebilir, üst üste bindirebilir, boş bırakabilirsin.

Grid'in temel kavramları:

• Grid hatları (lines): Izgarayı oluşturan görünmez çizgiler — numaralandırılır ya da isimlendirilir
• Hücreler (cells): İki hat arasında kalan alan
• Alanlar (areas): Birden çok hücrenin oluşturduğu mantıksal bölge (header, sidebar, main, footer)
• Tracks: Satır ya da sütun çizgileri arasındaki şerit
• Gap: Hücreler arası boşluk — modern projede margin yerine bunu kullanırsın

En çok kullanılan yerler: sayfa iskelet düzeni, kart galerisi, dashboard widget yerleşimi, fotoğraf galerisi ve ürün listeleme sayfaları. Konunun derinine inmek isteyenler için HTML CSS eğitimi Grid ve Flexbox'ı modern responsive yöntemlerle birlikte ele alır.

Flexbox ve Grid Arasındaki Temel Farklar

İki sistem birbirinin yerine geçmez; tamamlayıcıdır. Pratikte birlikte çalışırlar. En belirgin farklar şu eksende toplanır:

Pratik özet: Flexbox içerik için, Grid düzen için. Bir kartın içindeki ikon, başlık ve buton dizilimi Flexbox işidir; o kartların 4 sütunlu galeride yerleştiği yapı ise Grid işidir.

Hangi Durumda Hangisini Kullanmalı?

Karar verirken iki soru sor:

1. Yerleşim tek eksenli mi (sadece yatay ya da dikey dizilim) yoksa iki eksenli mi (hem satır hem sütun)?
2. Öğelerin boyutu içerikten mi gelmeli, yoksa düzen tarafından mı dikte edilmeli?

Cevap "tek eksen ve içerik odaklı" ise Flexbox seç. Cevap "iki eksen ve düzen odaklı" ise Grid seç. Çoğu modern sayfa aslında ikisini birlikte kullanır: dış iskelet Grid, içindeki bileşenler Flex.

İkisini Birlikte Kullanmak

Gerçek projede en yaygın senaryo karma kullanımdır. Aşağıdaki örnek hem sayfa iskeletini hem bileşen içi dizilimi gösterir:

.page-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 60px 1fr 80px;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  gap: 16px;
  min-height: 100vh;
}

.header {
  grid-area: header;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
}

.main-content .card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

Sayfa iskeleti Grid ile çizilir, header içindeki logo, menü ve buton dizilimi Flex ile yapılır, kartın içindeki başlık, açıklama ve buton sırası yine Flex ile düzenlenir. Bu hibrit yaklaşım modern frontend geliştirmenin standardıdır.

Yaygın Yanılgılar

• "Flexbox eski, Grid yeni, sadece Grid kullanalım." Yanlış. İkisi farklı problemi çözer; Flexbox da güncel ve gerekli.
• "Grid sadece sayfa iskeleti içindir." Yanlış. Küçük bileşenlerde de iki boyutlu yerleşim gerekiyorsa Grid uygundur.
• "Float ile aynı işi yaparız." Yanlış. Float zaten layout için tasarlanmamıştı, metnin yanındaki görselleri sarmak içindi. Grid ve Flexbox bu zorlamayı bitirdi.
• "Bootstrap kullanıyorum, bu yüzden öğrenmem gerekmez." Yanlış. Bootstrap 5 zaten arka planda Flexbox üzerine kurulu. Doğru özelleştirmek için temeli bilmek gerekir.

İki sistem de tarayıcı motorları tarafından native olarak optimize edilir; JavaScript ile layout hesaplamana gerek kalmaz. Bir frontend geliştiricinin gündelik araçları arasında bu ikisinde rahat olmak, performanslı ve bakımı kolay arayüzler kurmanın temel taşıdır.