Flexbox ve CSS Grid ile Modern Layout Tasarımı

Yorumlar

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ı

CSS

.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ı

HTML

<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ı

CSS

.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ı

HTML

<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ı

Özellik	Flexbox	CSS Grid
Kullanım Alanı	Tek boyutlu düzenler	Çift boyutlu düzenler
Ana Hizalama	Satır veya sütun bazlı	Satır ve sütun birlikte
Esneklik	Öğeleri büyütüp küçültme desteği var	Hücre bazlı yapı
Öğelerin Yerleşimi	Tek yönlü hizalama	Kompleks düzenler
En İyi Kullanım	Navigasyon çubukları, buton grupları	Sayfa düzenleri, paneller

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.