Web geliştirmede sayfa düzenleri oluşturmak için en yaygın kullanılan iki CSS teknolojisi Flexbox ve CSS Grid’dir. Her ikisi de modern ve esnek düzenler oluşturmak için güçlü araçlar sunar, ancak kullanım alanları farklıdır. Bu yazıda, Flexbox ve CSS Grid’in nasıl çalıştığını, hangi durumlarda kullanılmaları gerektiğini ve örneklerle nasıl uygulanacağını inceleyeceğiz.

1. Flexbox ile Esnek Düzenler

Flexbox (Flexible Box Layout), özellikle tek boyutlu (satır veya sütun bazlı) düzenler için idealdir. Öğeleri yatay veya dikey olarak hizalamak ve aralarındaki boşlukları esnek bir şekilde yönetmek için kullanılır.

Flexbox Temel Yapısı

.container {
  display: flex; /* Flexbox etkinleştirilir */
  justify-content: center; /* Öğeleri yatayda ortalar */
  align-items: center; /* Öğeleri dikeyde ortalar */
  gap: 20px; /* Öğeler arasındaki boşluk */
}

.item {
  width: 100px;
  height: 100px;
  background-color: steelblue;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

Önemli Flexbox Özellikleri

• display: flex; → Flexbox etkinleştirir.
• justify-content → Yatay hizalamayı kontrol eder (center, space-between, space-around).
• align-items → Dikey hizalamayı belirler (center, flex-start, flex-end).
• flex-wrap: wrap; → Öğelerin satır atlamasına izin verir.

Flexbox Örnek Kullanımı

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

Bu yapı, üç öğeyi yatay olarak ortalanmış şekilde ekrana yerleştirir.

2. CSS Grid ile İleri Seviye Layoutlar

CSS Grid, iki boyutlu (hem satır hem sütun bazlı) düzenler oluşturmak için kullanılır. Daha kompleks sayfa yapıları için idealdir.

CSS Grid Temel Yapısı

.grid-container {
  display: grid; /* Grid sistemini etkinleştirir */
  grid-template-columns: repeat(3, 1fr); /* 3 eşit sütun */
  grid-gap: 20px; /* Hücreler arasındaki boşluk */
}

.grid-item {
  background-color: darkorange;
  color: white;
  padding: 20px;
  text-align: center;
}

CSS Grid Örnek Kullanımı

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>

Bu yapı, 3 sütun ve 2 satırdan oluşan bir düzen oluşturur.

Önemli CSS Grid Özellikleri

• grid-template-columns → Sütun sayısını ve genişliklerini belirler.
• grid-template-rows → Satır yüksekliklerini ayarlar.
• grid-gap → Öğeler arasındaki boşluğu belirler.
• grid-template-areas → Belirli alanları düzenlemek için kullanılır.

3. Flexbox ve Grid Karşılaştırması

Ne zaman Flexbox kullanmalı?

• Basit düzenler, buton grupları ve navigasyon çubukları.
• Öğeleri yatay veya dikey olarak hizalamak için.

Ne zaman CSS Grid kullanmalı?

• Kompleks sayfa düzenleri.
• Kart listeleri, galeri görünümleri.

Hem Flexbox hem de CSS Grid, modern web tasarımında kritik rol oynayan teknolojilerdir. Flexbox, tek yönlü düzenler için mükemmelken, CSS Grid daha kompleks, çift boyutlu yapılar için idealdir.

✅ Flexbox’ı bileşenlerin hizalanması için,
✅ CSS Grid’i tam sayfa düzenleri için kullanabilirsiniz.

Bu teknikleri birlikte kullanarak daha esnek ve kullanıcı dostu tasarımlar oluşturabilirsiniz!