İçindekiler
Yerleşim ve Düzen (Layout)

CSS Grid Layout

Modern web tasarımının ana omurgasını oluşturan, sayfa içeriğini iki boyutlu (satır ve sütun) matris yapısında düzenleyen sistemdir.
Grid, Flexbox'ın tek boyutlu sınırlamalarını aşarak, karmaşık
kapsamlı sayfa düzenlerinin (page-level layouts) manuel matematik gerektirmeden yapılmasını sağlar.
Aşağıda Grid'in felsefesini ve temel özelliklerini inceleyeceğiz.

2D Layout Izgara Sistemleri

CSS Grid Layout Giriş ve Felsefe: 2D Yerleşim Çözümü

2D Layout Devrimi

CSS Grid Layout, CSS3 modülleriyle hayatımıza giren ve karmaşık sayfa düzenlerini yönetmek için özel olarak tasarlanmış olan, web tasarımındaki en güçlü iki boyutlu ( Two-Dimensional ) düzenleme modelidir.

Geleneksel yöntemlerde ( Float, Position ), layout oluşturmak manuel hesaplamalar ve yüksek Özgüllük puanları gerektirirken, Grid, tüm düzeni ana kapsayıcıya tanımlama imkanı sunarak içerik ve sunum ayrımını en üst seviyeye taşır.

1D vs 2D: Flexbox'ın Sınırlamaları

Grid'i anlamanın anahtarı, onu Flexbox ile karşılaştırmaktır.

Flexbox, öğeleri ya bir satır boyunca ya da bir sütun boyunca ( tek boyutlu ) hizalamak için tasarlanmıştır.

Grid ise, öğeleri aynı anda hem yatay (sütun) hem de dikey ( satır ) düzlemde konumlandırma ve boyutlandırma yeteneği sunar.

Bu, Grid'i sayfa iskeletini (page-level layout) ve dergi/gazete tarzı karmaşık yerleşimleri oluşturmak için ideal bir araç yapar.

Temel Grid Anatomisi

Grid'in temel anatomisi üç ana bileşenden oluşur:

Kapsayıcı (Grid Container): display: grid; özelliğini taşıyan ebeveyn öğedir, tüm grid tanımı buradan yapılır.

Öğeler (Grid Items): Kapsayıcının doğrudan çocuklarıdır, bunlar grid yapısı içine yerleştirilen içeriklerdir.

Hatlar, Satırlar ve Sütunlar: Grid sisteminin temelini oluşturan, sayfa iskeletinin yapıtaşlarıdır.

</>
Grid Layout (Izgara Düzeni) Yapısı Örneği (+) 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Layout (Izgara Düzeni) Yapısı Örneği</title>
    <link rel="stylesheet" href="style.css?v=1.0.150">
</head>

<body>
    <div class="izgara-giris">
        <div class="kutu">1</div>
        <div class="kutu">2</div>
        <div class="kutu">3</div>
    </div>
</body>

</html>
.izgara-giris {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
    padding: 20px;
    background-color: #f8fafc;
}

.kutu {
    background-color: #0f172a;
    color: white;
    padding: 30px;
    text-align: center;
    border-radius: 8px;
    font-family: sans-serif;
}
Seviye 4

Grid Kapsayıcı (Parent) Tanımı Temel Yapı ve Izgara Şablonu (Grid Template)

Grid'i Başlatma ve Kapsayıcı Kontrolü

CSS Grid, bir öğeye display: grid; veya display: inline-grid; atanmasıyla başlar, bu, o öğeyi Grid Kapsayıcıya dönüştürür.

Flexbox'taki gibi, Grid de tüm yerleşim mantığını ebeveyn öğeye verir.

Doğrudan alt öğeler, ebeveyn tarafından tanımlanan ızgara çizgileri içine yerleştirilir.

Izgara Yapısı: Satır ve Sütunların Oluşturulması

Grid'in çekirdek mekanizması, sanal bir ızgara sistemi oluşturmaktır, bu sistemin boyutları ve sayısı, iki temel özellik ile belirlenir:

1. Grid-template-columns: Dikey çizgileri ve sütunların genişliğini tanımlar.

grid-template-columns: 1fr 2fr 100px; ( Üç sütun oluşturur.)

2. grid-template-rows: Yatay çizgileri ve satırların yüksekliğini tanımlar.
grid-template-rows: auto 50vh 1fr; ( Üç satır oluşturur.)

Esnek Birim: fr (Fractional Unit)

Grid Layout'un en büyük avantajlarından biri, fr ( Fractional Unit ) birimidir ve bu birim, kapsayıcıda kalan

boş alanı orantısal olarak dağıtır.

Eğer ızgarada 200px ve 1fr olarak tanımlanmış iki sütun varsa, tarayıcı önce 200px sütununu ayırır, ardından kalan tüm alanı 1fr sütununa verir.

Eğer 1fr 2fr tanımlanmışsa, kalan alanın üçte biri ilk sütuna, üçte ikisi ikinci sütuna gider.

Tekrar Fonksiyonu (repeat()) Çok sayıda (örneğin 12) sütun tanımlanması gerektiğinde, repeat() fonksiyonu kullanılır.

Bu, kod tekrarını önler ve okunabilirliği artırır.

Örneğin: grid-template-columns: repeat(4, 1fr); ( Bu, 1fr genişliğinde 4 eşit sütun oluşturur. )

grid-template: özelliği ise hem satır hem de sütun tanımlamalarını tek bir kısayol içinde yapmanızı sağlar.

Grid Temel Özellikleri Kapsayıcı Tanımı ve Izgara Şablonu
Özellik
Tanım ve İşlevi
Kullanım Amacı (Basit ve Kritik)
display: grid
Bu, Grid düzenini başlatmak için zorunlu olan kuraldır.
Bir öğeye uygulandığında, o öğeyi bir Grid Kapsayıcıya dönüştürür ve tüm doğrudan alt öğeler otomatik olarak Grid Öğelerine dönüşür.
Grid'in temelini atar.
Bu kural, öğeleri Normal Akış'tan çıkarıp, tanımlanan satır ve sütun çizgileri arasına yerleştirilebilecekleri iki boyutlu bir alana taşır.
grid-template-columns
Grid Kapsayıcısının dikey çizgilerini ve bu çizgiler arasındaki sütunların genişliklerini tanımlar.
Sütun yapısını kurar.
100px 1fr 2fr değeri, üç sütun yaratır. br
Bu, sabit ( 100px ), esnek ( 1 kısım ) ve daha da esnek ( 2 kısım ) sütunların bir arada kullanılmasını sağlar.
grid-template-rows
Grid Kapsayıcısının yatay çizgilerini ve bu çizgiler arasındaki satırların yüksekliklerini belirler.
Satır yapısını kurar.
auto 200px değeri, içeriği kadar yüksekliğe sahip dinamik bir satır ile sabit 200px yüksekliğe sahip statik bir satır yaratır.
</>
İki Boyutlu Otorite: CSS Grid ile Karmaşık Arayüz İskeleti Örneği (+) 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Kapsayıcı (Parent) Satır ve Sütun İnşası Örneği</title>
    <link rel="stylesheet" href="style.css?v=1.0.150">
</head>

<body>
    <div class="grid-ana-kapsayici">
        <header class="grid-oge header">Header (Auto Height)</header>

        <aside class="grid-oge sidebar">Sidebar (200px)</aside>

        <main class="grid-oge icerik">
            <section class="kart">Kart 1 (1fr)</section>
            <section class="kart">Kart 2 (1fr)</section>
            <section class="kart">Kart 3 (1fr)</section>
            <section class="kart">Kart 4 (1fr)</section>
        </main>

        <footer class="grid-oge footer">Footer (1fr)</footer>
    </div>
</body>

</html>
/* style.css */

/* 1. Grid Kapsayıcıyı Başlatma */
.grid-ana-kapsayici {
    display: grid;

    /* 2. Sütun Yapısı (grid-template-columns) */
    /* Sidebar sabit 200px olsun, kalan tüm alan içeriğin olsun (1fr) */
    grid-template-columns: 200px 1fr;

    /* 3. Satır Yapısı (grid-template-rows) */
    /* Üst kısım içeriği kadar (auto), orta kısım geniş (50vh), alt kısım esnek (1fr) */
    grid-template-rows: auto 50vh 1fr;

    gap: 15px;
    /* Hücreler arası boşluk */
    padding: 15px;
    background-color: #f1f5f9;
    min-height: 100vh;
}

/* 4. İçerik Alanı İçin Alt Grid (repeat() kullanımı) */
.icerik {
    display: grid;
    /* repeat(4, 1fr) sayesinde 4 eşit sütun oluşturuyoruz */
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    background: #e2e8f0;
    padding: 15px;
}

/* Görsel Süslemeler */
.grid-oge {
    padding: 20px;
    color: white;
    font-weight: bold;
    border-radius: 8px;
    text-align: center;
}

.header {
    background-color: #0f172a;
    grid-column: span 2;
}

/* Üstü kapla */
.sidebar {
    background-color: #3b82f6;
}

.footer {
    background-color: #10b981;
    grid-column: span 2;
}

/* Altı kapla */

.kart {
    background: white;
    color: #334155;
    padding: 20px;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
}
Seviye 4

Boşluk, Oranlar ve Otomatik Akış Orta Seviye: Esneklik ve Boşluk Yönetimi

Temiz Boşluk Yönetimi: gap Özelliği

Grid Layout'un en büyük konfor özelliklerinden biri, hücreler arasındaki boşlukları yan etkisiz yöneten gap ( eski adıyla grid-gap ) özelliğidir.

Geleneksel yöntemlerde margin kullanmak, kapsayıcının sınırlarında istenmeyen boşluklar yaratırdı.

Çalışma Prensibi: gap özelliği, boşlukları sadece Grid hücreleri arasına, fakat dış sınırlara uygulamayacak şekilde uygular.

Kullanım: row-gap ( satırlar arası ), column-gap ( sütunlar arası ) veya kısayol olarak sadece gap kullanılır.

Grid-auto-flow: Otomatik Öğelerin Yerleşimi Grid'de bazı öğeleri manuel olarak konumlandırabiliriz, ancak kalan öğelerin ızgara içinde nasıl yerleşeceğini grid-auto-flow özelliği belirler.

Oransal Esneklik: minmax() Fonksiyonu

minmax(min, max) fonksiyonu, Grid'i responsive tasarımın zirvesine taşıyan kritik bir araçtır.

Bu, bir satır veya sütunun hem minimum hem de maksimum boyutunu aynı anda belirlemeyi sağlar.

Kullanım: grid-template-columns: minmax(200px, 1fr); Bu tanım, o sütunun genişliğinin minimum 200 piksel olmasını, ancak kapsayıcıda yer varsa maksimum olarak kalan alanın tamamını kullanmasını garanti eder.

Bu, içerik sığmadığında taşmayı önler.

Auto-fit ve Auto-fill: Otomatik Responsive Izgaralar

repeat() fonksiyonu ile birleşen auto-fit ve auto-fill anahtar kelimeleri, Media Queries yazmadan tamamen esnek ve responsive ızgaralar oluşturmanın modern yoludur.

repeat(auto-fit, minmax(250px, 1fr)); Bu tek satır kod: Kapsayıcı küçülürken 250px'ten daha dar olamayan mümkün olduğu kadar çoksütun oluşturur.

Bu, Grid'i tarayıcının boyutuna göre kendiliğinden adapte etmesini sağlar.

Otomatik Yerleşim Yönü ve Akış Mantığı grid-auto-flow Değerleri (row, column, dense) ve Yerleşim Davranışları
Değer
Açıklama ve Yerleşim Yönü
row (varsayılan)
Öğeler, satırlar boyunca soldan sağa doğru yerleştirilir.
Grid'in varsayılan davranışıdır.
column
Öğeler, sütunlar boyunca yukarıdan aşağıya doğru yerleştirilir.
Dikey yerleşim sağlar.
dense
Grid'in bir sonraki öğeyi yerleştirirken, kalan boşlukları doldurmak için öğelerin sırasını değiştirmesine izin verir.
Bu, boş hücreleri en aza indirir. row dense veya column dense şeklinde de kullanılabilir.

Grid Birimi: fr (Fraction Unit) Oransal Dağıtımın Matematiği

Göreceli Uzunluk Birimi

fr, CSS Grid Layout'a özgü bir göreceli uzunluk birimidir.

Bu birim, geleneksel piksel ( px ) veya yüzde ( %) gibi statik değerlerin aksine, kapsayıcıda tanımlanan diğer sabit boyutlu öğelere yer ayrıldıktan sonra kalan serbest boşluğun bir kısmını temsil eder.

Temel işlevi, öğelerin boyutlarını Flexbox'ın flex-grow mantığına benzer şekilde, matematiksel olarak orantılı hale getirmektir. Bu, Grid düzeninin ekran genişliği değişse bile tutarlı kalmasını sağlar.

Duyarlı Tasarımın Omurgası

fr birimi, responsive tasarımda manuel yüzde hesaplama yükünü ortadan kaldırır.

En önemlisi, ekran genişliği W değişse bile, 1fr ve 2fr sütunları arasındaki 1:2 oranı her zaman matematiksel olarak korunur.

Bu sistem, hem sabit boyutlu ( logo, kenar çubuğu ) hem de esnek boyutlu ( ana içerik ) öğelerin tek bir satırda, hatasız bir şekilde yan yana var olmasını sağlayan modern Flex-Rigid layout'ların temelini oluşturur.

Matematiksel Alan Dağıtımı fr Birimi ile Serbest Alanın Hesaplanması ve Paylaştırılması
Hesaplama Adımı
Açıklama ve Formül
1. Sabit Alana Öncelik
Grid, kapsayıcının toplam genişliğinden W, öncelikle sabit boyutlu öğelere yer ayırır S = 100px.
Bu alan, serbest bölüşümden hariç tutulur.
2. Serbest Alanın Tespiti
Geriye kalan serbest alan R, şu formülle bulunur: R = W - S
3. Oran Hesaplaması
Kalan R alan, 1fr ve 2fr olmak üzere toplam 1 + 2 = 3 orana bölünür.
4. Matematiksel Dağıtım
İkinci sütun (1fr): Serbest alanın 1/3'ünü alır (1/3 × R).
Üçüncü sütun (2fr): Serbest alanın 2/3'ünü alır (2/3 × R).
Otomatik Akış Yönetimi Grid Öğelerinin Otomatik Yerleşimi ve Boşluk Yönetimi
Özellik
Tanım ve İşlevi
Akademik ve Pratik Kullanım
grid-auto-flow
Grid Öğelerinin, açıkça konumlandırılmadığı durumlarda ızgaraya nasıl otomatik olarak yerleşeceğini belirler.
Row (Varsayılan): Öğeleri sırasıyla satırları doldurarak yerleştirir ve ihtiyaç oldukça yeni satırlar ekler (sayfayı dikeyde uzatır).
Column: Öğeleri sütunları doldurarak yerleştirir ve ihtiyaç oldukça yeni sütunlar ekler (sayfayı yatayda uzatır, dikkatli kullanılmalıdır).
grid-auto-rows / grid-auto-columns
Otomatik akışla oluşturulan satır ve
sütunlara varsayılan bir boyut atar.
İçeriğin ötesine geçen yer tutucular için veya düzene eklenecek içerik miktarının belirsiz olduğu ( bir blog listesi ) durumlarda, otomatik eklenen satırların sabit bir yüksekliğe ( 150px ) sahip olmasını garanti eder.
gap
(Boşluk Yönetimi)
Flexbox'tan miras alınan bu özellik, Grid Öğeleri arasındaki dikey ( row-gap ) ve yatay ( column-gap ) boşlukları yönetir.
Margin Çakışması Yok: Grid sisteminde, öğe aralarına margin yerine gap kullanmak, çakışma ve dışa taşma ( bleed ) sorunlarını ortadan kaldırır.
Boşluğu sadece öğelerin arasında tutan temiz ve öngörülebilir bir çözümdür.
</>
Sıfır Media Query: Auto-Fit ve MinMax ile Kendi Kendine Karar Veren Izgara Örneği (+) 
<!DOCTYPE html>
<html lang="tr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Akıllı Medya Kütüphanesi</title>
</head>

<body>
    <div class="medya-kutuphanesi">
        <div class="medya-kart">1</div>
        <div class="medya-kart">2</div>
        <div class="medya-kart ozel-kart">3 (Dense Etkisi)</div>
        <div class="medya-kart">4</div>
        <div class="medya-kart">5</div>
        <div class="medya-kart">6</div>
    </div>

    <div class="oran-bilgi">
        <p>Pencereyi daraltın; kartlar <strong>200px</strong> altına düşmeden otomatik alt satıra geçer.</p>
    </div>
</body>

</html>
/* style.css */

.medya-kutuphanesi {
    display: grid;
    
    /* 1. Auto-fit ve minmax(): Duyarlı Tasarımın Omurgası */
    /* Sütunlar en az 200px olsun, yer varsa 1fr ile alanı paylaşsın. */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    
    /* 2. gap: Temiz Boşluk Yönetimi */
    /* Satır ve sütunlar arası 20px tertemiz boşluk, dış sınırlara taşmaz */
    gap: 20px;
    
    /* 3. grid-auto-flow: Otomatik Akış Yönetimi */
    /* 'dense' sayesinde büyük öğelerden kalan boşluklar otomatik doldurulur */
    grid-auto-flow: row dense;
    
    /* 4. grid-auto-rows: Otomatik eklenen satırların yüksekliği */
    grid-auto-rows: 150px;
    
    padding: 20px;
    background: #f8fafc;
}

.medya-kart {
    background-color: #3b82f6;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Özel durum: Bazı kartların akışı bozduğu senaryo */
.ozel-kart {
    background-color: #f59e0b;
    grid-column: span 2; /* 2 sütun kaplar */
    grid-row: span 2;    /* 2 satır kaplar */
}

.oran-bilgi {
    text-align: center;
    padding: 20px;
    font-family: sans-serif;
    color: #475569;
}
Seviye 5

Responsive Grid Tasarımı Gelişmiş Teknikler: Media Query Olmadan Akışkanlık

Media Query Bağımlılığının Azaltılması

CSS Grid Layout'un en büyük mimari vaadi, geliştiricilerin sayfa düzeni için çok sayıda Media Query yazma zorunluluğunu ortadan kaldırmasıdır.

Grid, bileşenlerin tarayıcı genişliğine göre akışkan bir şekilde otomatik olarak sütun sayısını ve boyutlarını ayarlamasını sağlayan yerleşik mekanizmalara sahiptir.

Duyarlı Boyutlandırma Formülü

Responsive Grid'in temel formülü, repeat() ve minmax() fonksiyonlarının birleşimidir:

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

Bu tek satır kod, aşağıdaki karmaşık işlevleri yerine getirir:

250px (minmax): Her sütunun minimum genişliğinin 250 piksel taşmasını önler.

1fr (minmax): 250px minimum boyutu sağlandıktan sonra, kalan boşluğun orantısal olarakboşluğun orantısal olarak dağıtılmasını sağlar.

auto-fit (repeat): 250px'ten daha dar olmayacak şekilde, kapsayıcıya sığabilen en fazla sayıda sütunu otomatik olarak oluşturur.

Boşluk Yönetimi: auto-fit ve auto-fill

Her iki anahtar kelime de sütun sayısını dinamik olarak belirlerken, temel farkları boş hücreleri nasıl ele aldıklarıdır:

Auto-fill: Kapsayıcıya sığabilecek tüm olası sütunları oluşturur, içerik olsa da olmasa da ( boş hücreler yaratır ), bu, düzeni daha katı hale getirir.

Auto-fit: Yalnızca içerik içeren sütunları hesaba katar. Eğer boş sütunlar varsa, kalan alanı mevcut öğelere yayarak tüm alanı kullanır ve boş hücreleri sanal olarak "daraltır" ve genellikle <div class="grid-container"> kullanılırken tercih edilen yöntemdir.

Container Queries ile Tamamlayıcılık

Grid'in bu otomatik akış yeteneği, modern @container sorgularıyla mükemmel bir uyum içindedir.

Grid, sayfanın genişliğine göre sütun sayısını otomatik olarak değiştirirken; Container Queries, bu her bir sütunun içindeki bileşenlerin

( ürün kartı ) kendi daralan boyutuna göre iç stilini ( font boyutu, resim konumu ) değiştirmesini sağlar.

Böylece CSS, tamamen bağlama duyarlı hale gelir.

</>
Grid Alanları Yapısı ( Görsel Haritalama ) Örneği (+) 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Alanları (Grid Areas) Özelliği Örneği </title>
    <link rel="stylesheet" href="style.css?v=1.0.150">
</head>

<body>
    <div class="sayfa-haritasi">
        <div class="h">Header</div>
        <div class="s">Sidebar</div>
        <div class="i">İçerik</div>
        <div class="f">Footer</div>
    </div>
</body>

</html>
.sayfa-haritasi {
    display: grid;
    grid-template-areas:
        "header header"
        "sidebar icerik"
        "footer footer";
    gap: 10px;
}

.h {
    grid-area: header;
    background: #334155;
    color: white;
    padding: 10px;
}

.s {
    grid-area: sidebar;
    background: #94a3b8;
    padding: 20px;
}

.i {
    grid-area: icerik;
    background: #f1f5f9;
    padding: 20px;
}

.f {
    grid-area: footer;
    background: #1e293b;
    color: white;
    padding: 10px;
}

Grid Formülü: Akışkan Sütun Mimarisi repeat(auto-fit, minmax(min-size, 1fr)) Analizi

Karmaşık Talimatın Çözümü

CSS Grid'de medya sorgularından kaçınarak tamamen duyarlı bir düzen oluşturmak için kullanılan en önemli ve güçlü sözdizimi şudur: 

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

Bu kod, tarayıcıya şu karmaşık, ancak net talimatı verir:

" Mümkün olduğu kadar çok sütun yerleştir; ama her sütunun boyutu minimum 250px yap ve sığdıktan sonra kalan boşluğu eşit olarak paylaşmalılar."

Modüler Analiz: Her Parçanın Görevi

Bu sözdizimi, üç kritik işlevi birleştirerek çalışır:

Minmax(min, max): Bu, sütun genişliğinin okunabilirlik sınırını tanımlar.

250px sayesinde sütunlar, içeriklerinin güvenli bir şekilde görüntülenebileceği en dar sınıra sabitlenir.

1fr ise her zaman kalan boşluğu orantısal olarak paylaşma esnekliğini sağlar.

Auto-fit: Sütunların sayısını otomatik olarak hesaplayan bu anahtar kelime, kapsayıcıya sığabilecek maksimum sütun sayısını belirler.

Kalan boşluk, var olan sütunlara eşit olarak dağıtılır (1fr sayesinde).

Repeat(): Bu iki fonksiyonu bir araya getirerek, tarayıcının ekran genişlediğinde sütunları çoğaltmasını, daraldığında ise sayılarını azaltmasını sağlar.

Dinamik Akışkanlık

Bu tek satırlık CSS kuralı, karmaşık JavaScript veya yüzlerce satırlık Media Query kodunun yerini alır.

Ekran genişlediğinde, sütunlar çoğalır.

Ekran daraldığında ve sütunlar 250px'in altına düşmek üzereyken, otomatik olarak alt satıra geçerler ( wrap ).

Bu, modern web uygulamalarında esnek içerik listeleri ( ürün kartları, galeri öğeleri vb. ) oluşturmak için en verimli ve en az bakım gerektiren yöntemdir.

</>
Explicit ve Implicit Grid (Belirgin vs. Örtük) Yapısı Örneği (+) 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Explicit ve Implicit Grid (Belirgin vs. Örtük) Yapısı Örneği</title>
    <link rel="stylesheet" href="style.css?v=1.0.150">
</head>

<body>
    <div class="otomatik-izgara">
        <div class="kart">Veri 1</div>
        <div class="kart">Veri 2</div>
        <div class="kart">Veri 3 (Otomatik Satır)</div>
    </div>
</body>

</html>
.otomatik-izgara {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 150px;
    gap: 10px;
}

.kart {
    background: #fbbf24;
    padding: 20px;
    border: 2px solid #d97706;
}

Repeat() Fonksiyonu: Akıllı Tekrarlama Kod Tekrarını Önleme ve Dinamik Sütun Sayısı

Gereksiz Tekrarı Ortadan Kaldırma

repeat() fonksiyonu, grid-template-columns veya grid-template-rows özelliklerinde aynı boyutta birden fazla sütun veya satır tanımlaması gerektiğinde, kod tekrarını önlemek amacıyla kullanılan Grid'e özgü bir araçtır.

Örnek (Sabit Tekrar): grid-template-columns: repeat(4, 1fr); ifadesi, kapsayıcıda eşit genişlikte dört ayrı sütun tanımlar.

Bu, 1fr 1fr 1fr 1fr yazmaktan çok daha temiz, okunaklı ve sürdürülebilirdir.

Duyarlılık Kontrolü: auto-fill ve auto-fit

repeat() fonksiyonunun asıl gücü, tekrar sayısını sabit bir sayı yerine, duyarlı tasarımlar için özel olarak geliştirilmiş dinamik anahtar kelimelerle kontrol etme yeteneğidir.

Çalışma Felsefesi: auto-fill ve auto-fit kullanıldığında, tarayıcıya "Kapsayıcıya sığabildiği kadar çok sütun/satır yerleştir" talimatı verilir.

Bu, Grid'in ekran genişliği ne olursa olsun, sütun sayısını otomatik olarak ayarlamasını sağlayarak, geliştiricinin Media Query yazma zorunluluğunu büyük ölçüde ortadan kaldırır.

Kod Kalitesi ve Sürdürülebilirlik

repeat() fonksiyonu sadece bir kısayol değildir; aynı zamanda Grid mimarisinin programatik doğasının bir parçasıdır.

Geleneksel olarak, 12 sütunlu bir grid yapısı oluşturmak için 12 kez 8.33% yazmak veya her satır için ayrı ayrı tanımlar yapmak gerekirdi.

repeat(12, 1fr) ise hem kodun daha kısa hem de okunaklı olmasını sağlar.

Ayrıca, sütun sayısını değiştirmek gerektiğinde, sadece tek bir rakamı güncellemek yeterli olur.

</>
Programatik Yerleşim: repeat() Fonksiyonu ile Akıllı Izgara Mimarisi Örneği (+) 
<!DOCTYPE html>
<html lang="tr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Başlık</title>
    <link rel="stylesheet" href="style.css?v=1.0.150">
</head>

<body>
    <div class="vitrin-konteyner">
        <header class="vitrin-baslik">Haftanın Trendleri</header>

        <div class="urun-kart">Ürün 1</div>
        <div class="urun-kart">Ürün 2</div>
        <div class="urun-kart">Ürün 3</div>
        <div class="urun-kart">Ürün 4</div>
        <div class="urun-kart">Ürün 5</div>
        <div class="urun-kart">Ürün 6</div>
    </div>

    <div class="kontrol-paneli">
        <p>Ekranı daraltın: <code>auto-fill</code> sayesinde kartlar sığmadıkça otomatik olarak alt satıra kayar.</p>
    </div>
</body>

</html>
/* style.css */

.vitrin-konteyner {
    display: grid;
    
    /* 1. Programatik 12 Sütunlu Yapı (Sürdürülebilirlik) */
    /* Eskiden 12 kez %8.33 yazılırdı, şimdi tek satır: */
    grid-template-columns: repeat(12, 1fr);
    
    /* 2. Dinamik Tekrarlama (Duyarlılık Kontrolü) */
    /* Ürün kartları için: Minimum 250px olsun, sığdığı kadar sütun oluştur */
    /* Not: Gerçek projelerde genellikle alttaki satır tercih edilir: */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    
    gap: 15px;
    padding: 20px;
    background-color: #fdfdfd;
}

.vitrin-baslik {
    /* 12 sütunlu yapıda tüm satırı kaplamasını sağlar */
    grid-column: 1 / -1; 
    background: #1e293b;
    color: white;
    padding: 15px;
    text-align: center;
    border-radius: 8px;
    font-weight: bold;
}

.urun-kart {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    transition: transform 0.3s, box-shadow 0.3s;
    color: #475569;
    font-weight: 500;
}

.urun-kart:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border-color: #3b82f6;
}

.kontrol-paneli {
    text-align: center;
    padding: 20px;
    color: #64748b;
    font-size: 0.9rem;
}

Minmax() Fonksiyonu: Duyarlılık Limitleri Kontrollü Esneklik: Minimum ve Maksimum Değerler Sayısı

Min Değeri: Okunabilirlik Kuralı

minmax(min, max) fonksiyonundaki ilk argüman, Grid hücresinin alabileceği minimum boyutu tanımlar

( minmax(250px, 1fr) ).

İşlevi: Bu, özellikle mobil cihazlarda metin veya kartların aşırı daralarak okunaksız hale gelmesini önleyen kritik bir erişilebilirlik ve okunabilirlik kuralıdır.

Tarayıcı ne kadar daralırsa daralsın, sütun genişliği belirlenen alt sınırın altına inmeyecektir.

Max Değeri: Oransal Paylaşım

İkinci argüman, sütunun alabileceği maksimum boyutu veya oranı belirler.

Bu değer genellikle fr birimiyle kullanılır ve bu, sütunların kalan tüm serbest alanı eşit olarak paylaşmasını emreder.

Önemi: Bu, sütunların her zaman esnek kalmasını ve ekran büyüdükçe orantılı olarak genişlemesini sağlar, ancak asla gereğinden fazla yer kaplamaz (veya gereğinden fazla boşluk bırakmaz).

Duyarlı Tasarımdaki Kritik Rolü

minmax() fonksiyonu, Grid'in en önemli duyarlılık kuralının temelini oluşturur:

"Gerektiği zaman esne, ama asla belirlenen limitleri ihlal etme."

Bu tek fonksiyon, karmaşık medya sorgularına ihtiyaç duymadan, tek bir kural bloğu içinde tam bir duyarlı sütun sistemi oluşturulmasına olanak tanır.

Bu, Grid'i sayfa seviyesindeki yerleşimler için Flexbox'tan çok daha güçlü ve öngörülebilir bir araç yapar.

</>
Kontrollü Esneklik: minmax() ile Okunabilirlik ve Erişim Limitleri Örneği (+) 
<!DOCTYPE html>
<html lang="tr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hizmet Kartları / Özellikler Paneli</title>
    <link rel="stylesheet" href="style.css?v=1.0.150">
</head>

<body>
    <div class="ozellikler-grid">
        <div class="ozellik-kart">
            <i class="fas fa-rocket"></i>
            <h3>Hızlı Performans</h3>
            <p>Sistemimiz en yüksek hız limitlerini zorlamak için tasarlandı.</p>
        </div>
        <div class="ozellik-kart">
            <i class="fas fa-shield-alt"></i>
            <h3>Güvenli Altyapı</h3>
            <p>Verileriniz uçtan uca şifreleme ile koruma altındadır.</p>
        </div>
        <div class="ozellik-kart">
            <i class="fas fa-code"></i>
            <h3>Temiz Kod</h3>
            <p>En modern standartlara uygun, sürdürülebilir mimari.</p>
        </div>
    </div>

    <div class="limit-test-alani">
        <p>Tarayıcıyı daraltın: Kartlar <strong>280px</strong> sınırına dayandığında otomatik alt satıra geçerler.</p>
    </div>
</body>

</html>
/* style.css */

.ozellikler-grid {
    display: grid;
    
    /* 1. minmax() Kullanımı: Duyarlılık Limitleri */
    /* Min: 280px (Okunabilirlik sınırı), Max: 1fr (Kalan tüm alan) */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    
    gap: 25px;
    padding: 30px;
    background-color: #f1f5f9;
}

.ozellik-kart {
    background: #ffffff;
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Hover ile görsel geri bildirim */
.ozellik-kart:hover {
    border-color: #3b82f6;
    transform: scale(1.02);
}

.ozellik-kart i {
    font-size: 2.5rem;
    color: #3b82f6;
    margin-bottom: 15px;
}

.ozellik-kart h3 {
    margin: 10px 0;
    color: #1e293b;
}

.ozellik-kart p {
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.6; /* Okunabilirlik için satır aralığı */
}

.limit-test-alani {
    text-align: center;
    margin-top: 20px;
    color: #94a3b8;
    font-style: italic;
}

Auto-fit vs. auto-fill Farkı Akademik Ayrım: Boşluk Yönetimi ve Kapasite

Dinamik Yerleştirme Mantığı

Hem auto-fit hem de auto-fill, repeat() fonksiyonu içinde kullanılarak Grid'in dinamik yerleştirme mantığını yönetir.

İkisi de ortak olarak kapsayıcıya sığabileceği kadar çok sütun yerleştirmeyi hedefler.

Aralarındaki temel fark, Grid Kapsayıcının son satırında veya sırasında boş hücreler kaldığında ortaya çıkar.

Bu, Grid'in izleri nasıl saydığı ve kalan boş alanı nasıl dağıttığıyla ilgilidir.

Auto-fill: Boşlukları Koru

auto-fill anahtar kelimesi, ızgarada içerik olsun ya da olmasın, kapsayıcıya sığabilecek maksimum iz sayısını hesaplar.

Davranış: Son sırada içerik eksikse ( 5 öğe var ama 6 sütun sığıyor ), auto-fill, o boş hücreleri oluşturur ve görünür bir boşluk olarak korur ve bu boş hücreler, öğe yerleştirme amaçları için hala vardır ve diğer öğelerin genişlemesini engeller.

Auto-fit: Kalan Alanı Yay

auto-fit ise, tarayıcıya sadece aktif, yani içerik içeren Grid öğelerini hesaba katma talimatı verir.

Davranış: Son sırada boş hücreler kaldığında, auto-fit bu boş izleri sıfır genişliğe düşürür.

Böylece kalan boş alan, mevcut öğeler arasında eşit olarak dağıtılır.

Bu, öğelerin tüm kapsayıcı genişliğini kaplayarak genişlemesini sağlar.

Mimari Karar: Hangi Senaryoda Hangisi?

Auto-fit, genellikle tüm kapsayıcı alanın kullanılmasını istediğimiz, dinamik içerik listeleri ( Ürün Kartları, Galeri ) oluştururken tercih edilir.

Amacı, içerik öğelerinin kendilerini otomatik olarak yaymasını sağlamaktır.

Auto-fill ise, Grid'in belirli bir sayıda boş izi korumasını istediğimiz ve bu boşlukları daha sonra manuel olarak dolduracağımız veya sadece belli sayıda iz olmasını garantilemek istediğimiz durumlarda kullanılır.

Ancak çoğu Responsive tasarım senaryosunda auto-fit daha yaygındır.

auto-fit vs. auto-fill Dinamik Yerleştirme Mantığı ve Boşluk Yönetimi
Anahtar Kelime
Tanım ve İşlevi
Etkisi ve Kullanım Amacı
auto-fill
Kapsayıcıda kaç tane sütun sığabileceğini hesaplar ve o kadar sütun hücresi oluşturur.
Yer Tutucudur: Son satırda doldurulacak öğe kalmasa bile, tarayıcı boş sütunları tutar ve alanlarını işgal eder.
Daha sonra dinamik olarak öğe eklenmesi beklenen yerlerde kullanılır.
auto-fit
Tıpkı auto-fill gibi sütunları hesaplar, ancak son satırda boş kalan sütunları daraltır ve o alanı, diğer aktif sütunların genişlemesi için serbest bırakır.
Daha Duyarlı: Genellikle tercih edilen yöntemdir.
Tüm aktif öğelerin, kalan alanı eşit olarak paylaşmasını ve genişlemesini sağlar.
Boşlukları gereksiz yere tutmaz.
</>
Boşluk Yönetimi Sanatı: auto-fill ve auto-fit Arasındaki Akademik Ayrım Örneği (+) 
<!DOCTYPE html>
<html lang="tr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dinamik Kategori Paneli vs. Esnek Portföy</title>
    <link rel="stylesheet" href="style.css?v=1.0.150">
</head>

<body>
    <div class="test-konteyner">
        <h3>1. Auto-Fill (Boşlukları Koru)</h3>
        <div class="grid-kapsayici fill">
            <div class="oge">1</div>
            <div class="oge">2</div>
            <div class="oge">3</div>
        </div>

        <h3>2. Auto-Fit (Kalan Alanı Yay)</h3>
        <div class="grid-kapsayici fit">
            <div class="oge">1</div>
            <div class="oge">2</div>
            <div class="oge">3</div>
        </div>
    </div>

    <p class="analiz-notu">
        Not: Her iki grid de 4 sütun alabilecek kapasitededir ancak sadece 3 öğe eklenmiştir.
    </p>
</body>

</html>
/* style.css */

.grid-kapsayici {
    display: grid;
    gap: 15px;
    padding: 15px;
    background-color: #f1f5f9;
    border: 2px dashed #cbd5e1;
    margin-bottom: 30px;
}

/* AUTO-FILL: Sığabildiği kadar hayali sütun oluşturur ve yerlerini korur */
.fill {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

/* AUTO-FIT: Boş kalan sütunları daraltır ve alanı mevcut öğelere dağıtır */
.fit {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.oge {
    background-color: #3b82f6;
    color: white;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    border-radius: 8px;
}

.test-konteyner h3 {
    font-family: sans-serif;
    color: #1e293b;
    margin-bottom: 10px;
}

.analiz-notu {
    text-align: center;
    font-family: monospace;
    background: #fffbeb;
    padding: 10px;
    border: 1px solid #fef3c7;
}
Seviye 6

Konumlandırma ve Alan İsimlendirme İleri Seviye: Görsel Tasarımın CSS'e Aktarılması

Görsel Kodlama Gücü (Source Order Independence)

Bu seviyedeki Grid özellikleri, Grid Layout'un asıl gücünü, yani iki boyutlu, karmaşık sayfa iskeletini görsel olarak kodlama yeteneğini ortaya çıkarır.

Grid, geleneksel HTML akışındaki sıralamaya (Source Order) bağımlı kalmadan, öğeleri ızgaranın herhangi bir hücresine veya alanına hassas koordinatlarla yerleştirmeyi sağlar.

Bu, özellikle erişilebilirlik veya SEO amaçlı olarak HTML sırasını korurken, görsel düzeni tamamen değiştirmek gerektiğinde kritik öneme sahiptir.

Çizgi Bazlı Yerleşim (Line-Based Placement)

Grid'in en temel konumlandırma yöntemi, oluşturulan sanal çizgileri (Line Numbers) kullanmaktır.

Bu, öğeyi yerleştirmek istediğimiz satır ve sütun çizgilerinin başlangıç ve bitiş koordinatlarını tanımlamayı içerir.

Temel Özellikler: grid-column-start / grid-column-end: Öğenin kaçıncı sütun çizgisinden başlayıp, kaçıncı çizgiye kadar uzanacağını belirler. grid-row-start / grid-row-end: Aynı işlemi satırlar için yapar.

Kısayol: grid-column: 1 / span 3; ifadesi, öğenin 1. çizgiden başlayıp, 3 sütun boyunca uzanmasını söyler. Bu, belirli bir genişliği manuel olarak ayarlamaktan daha hassas bir yöntemdir.

grid-template-areas: Sayfa Planı

Grid'in en okunabilir ve en sürdürülebilir özelliği, grid-template-areas ile sayfa düzenini bir harita gibi çizme yeteneğidir.

Bu, bir web sayfasının ana düzenini ( Header, Sidebar, Footer ) kağıt üzerinde çizilmiş bir plan gibi CSS kodunda tanımlamayı mümkün kılar. 

.container {
  grid-template-areas: 
    "header header header"
    "sidebar main   main"
    "footer footer footer";
}

Nasıl Kullanılır: Kapsayıcıda alanlar tanımlandıktan sonra, HTML öğeleri (.header, .sidebar vb.) doğrudan bu alana atanır:

grid-area: header;.

Bu, kodun okunabilirliğini ve karmaşık yönetilebilirlik seviyesini radikal bir şekilde artırır.

Grid Öğelerinin Konumlandırılması Çizgi Bazlı Yerleşim ve Koordinat Sistemi

Çizgi Numaraları ile Düzen Tanımı

Grid Layout, Flexbox'tan farklı olarak, düzeni doğrudan izler yerine bu izleri çevreleyen çizgilerle tanımlar.

Grid Kapsayıcıda kaç tane sütun veya satır tanımlarsanız, bu alanları çevreleyen o kadar çizgi numarası oluşur.

Örneğin: 4 sütun tanımlarsanız, 1'den 5'e kadar numaralandırılmış 5 dikey çizgi oluşur.

Öğeler, bu çizgi numaralarına göre yerleştirilir ve yayıldıkları alan ( span) belirlenir.

Bu, öğenin konumunu, sabit bir koordinat sistemi kullanarak tanımlamayı sağlar.

Her Grid öğesi, ait olduğu Kapsayıcı içinde konumunu ve kapladığı alanı dört temel özellik ile tanımlar:

Span Anahtar Kelimesi ve Negatif Çizgiler

Kısayollar: grid-column ve grid-row özellikleri, start ve end değerlerini tek bir satırda, / ile ayırarak birleştirmeyi sağlar.

grid-column: 2 / 5; ( 2. çizgiden başla, 5. çizgide bitir. )

Span ile Uzunluk Belirtme: Bitiş çizgisini net bir numara yerine, başlangıç noktasından kaç iz boyunca uzayacağını belirtmek için span anahtar kelimesi kullanılır.

grid-row: 3 / span 2; ( 3. çizgiden başla ve 2 satır aşağı yayıl. )

Negatif Çizgiler: Grid çizgileri, kutunun sağ ve alt sınırlarından geriye doğru saymak için negatif değerler de alabilir ( -1, en sondaki çizgiyi temsil eder).

Bu, dinamik genişliğe sahip kapsayıcılarda esneklik sağlar.

Grid Öğelerinin Konumlandırılması Çizgi Numaraları ile Hassas Yerleştirme
Özellik
Tanım ve İşlevi
Akademik ve İleri Kullanım
grid-column-start / grid-column-end
Öğenin yatayda ( sütunda ) başlayacağı ve biteceği çizgi numaralarını belirler.
Spanning (Yayılma): Bir öğeyi birden fazla sütuna yaymak için kullanılır.
( grid-column-start: 1; grid-column-end: 4; ile öğe 3 sütun kaplar)

Sayfa genişledikçe bile öğelerin sabit bir sütun sayısını korumasını sağlar.
grid-row-start / grid-row-end
Öğenin dikeyde ( satırda ) başlayacağı ve biteceği çizgi numaralarını belirler.
Öğeyi birden fazla satıra yayarak, yatay ve dikey akışı birbirinden ayırırız
HTML sırasından bağımsız yerleştirme sağlar.
grid-column / grid-row
(Kısayol)
Başlangıç ve bitiş çizgilerini tek bir satırda, / işaretiyle ayırarak tanımlar
( grid-column: 2 / 5; ).
Kodu kısaltır ve satır/sütun numaralarını hızlıca atamayı sağlar.
</>
Görsel Kodlama: template-areas ve Çizgi Bazlı Hassas Yerleşim Örneği (+) 
<!DOCTYPE html>
<html lang="tr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Haber Portalı / Magazin Layout</title>
    <link rel="stylesheet" href="style.css?v=1.0.150">
</head>

<body>
    <div class="magazin-iskeleti">
        <header class="bolum-header">Günün Başlıkları</header>

        <aside class="bolum-sidebar">Popüler Haberler</aside>

        <main class="bolum-ana">
            <article class="manset">Ana Manşet (Geniş Alan)</article>
            <article class="alt-haber">Kısa Haber 1</article>
            <article class="alt-haber">Kısa Haber 2</article>
        </main>

        <footer class="bolum-footer">2026 Haber Ajansı</footer>
    </div>
</body>

</html>
/* style.css */

.magazin-iskeleti {
    display: grid;
    /* 1. grid-template-areas: Sayfa Planını Görsel Olarak Çizme */
    grid-template-areas: 
        "ust      ust      ust"
        "yan      ana      ana"
        "alt      alt      alt";
    
    /* 2. Çizgi Bazlı Tanımlama (Line-Based) */
    grid-template-columns: 250px 1fr 1fr;
    grid-template-rows: auto 1fr auto;
    
    gap: 20px;
    min-height: 100vh;
    padding: 20px;
    background-color: #f8fafc;
}

/* Alan Atamaları */
.bolum-header { grid-area: ust; background: #0f172a; color: white; padding: 20px; }
.bolum-sidebar { grid-area: yan; background: #3b82f6; color: white; padding: 20px; }
.bolum-ana     { grid-area: ana; display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
.bolum-footer { grid-area: alt; background: #1e293b; color: white; padding: 15px; text-align: center; }

/* 3. Çizgi Bazlı Yerleşim ve Span Kullanımı */
.manset {
    /* 1. sütun çizgisinden başla, sona kadar (-1) git */
    grid-column: 1 / -1; 
    background: #ffffff;
    border-left: 5px solid #ef4444;
    padding: 40px;
    font-size: 1.5rem;
    font-weight: bold;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
}

.alt-haber {
    /* Span ile 1 birimlik yer kapla (Varsayılan) */
    background: #ffffff;
    padding: 20px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}
Seviye 5

Grid vs. Flexbox (İki Boyutlu Paradigma) Akademik Fark: 1D Mikro Düzen vs. 2D Makro Düzen

Giriş Konusu

Grid ve Flexbox, her ikisi de modern düzen sistemi olsa da, birbirinin yerine geçmezler; aksine farklı ölçeklerdeki düzenleme sorunlarını çözmek için tasarlanmışlardır.

İkisini bir arada kullanmak, CSS'te en verimli ve güçlü mimariyi oluşturur.

Grid: Sayfa Planını Çizmek

Grid, düzeni aynı anda hem satırlar hem de sütunlar üzerinde kontrol etme felsefesine dayanır, bu, tüm yerleşim mantığını ebeveyn öğeye yığar.

Kullanım Amacı: Sayfanın ana iskeletini ve makro düzenini ( Header, Sidebar, Footer, Ana İçerik alanlarının konumu ) tasarlamak için kullanılır.

Geliştiricinin amacı, içeriği yerleştireceği sanal bir ızgara yapısı oluşturmaktır.

Flexbox: Bileşen İçini Yönetmek

Flexbox, düzeni ya sadece bir satır ( row ) ya da sadece bir sütun ( column ) üzerinde çalıştırır.

Esas amacı, öğeler arasındaki boşluğu adil ve esnek bir şekilde dağıtmaktır.

Kullanım Amacı: Tek bir Grid hücresi veya bir bileşenin içindeki öğeleri ( bir kartın altındaki iki düğme grubunu yan yana hizalamak, bir navigasyon çubuğundaki linkleri eşit boşlukla yaymak veya dikey merkezleme yapmak ) düzenlemek için kullanılır.

Katmanlı Mimari (Layout Synergy)

Geliştiriciler, günümüzde bu iki sistemi katmanlı bir mimari içinde entegre eder:

1. Katman (Makro): Sayfanın ana çatısı ( genel satır ve sütun yapısı ) Grid ile kurulur.

2. Katman (Mikro): Bu ana çatının her bir hücresinin içindeki içeriğin hizalanması ve dağıtımı Flexbox ile yapılır.

Bu yaklaşım, sadece verimli değil, aynı zamanda son derece esnek ve sürdürülebilir bir düzenleme mimarisi oluşturur.

</>
Layout Synergy: Makro Düzen ve Mikro Bileşen Entegrasyonu Örneği (+) 
<!DOCTYPE html>
<html lang="tr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern Uygulama Arayüzü (App Shell & Dashboard)</title>
    <link rel="stylesheet" href="style.css?v=1.0.150">
</head>

<body>
    <div class="app-konteyner">
        <header class="app-header">
            <div class="brand">
                <i class="fas fa-grip-lines"></i> <span>FlexGrid App</span>
            </div>
            <nav class="top-nav">
                <a href="#" class="nav-item">
                    <i class="fas fa-home"></i> Dashboard
                </a>
                <a href="#" class="nav-item">
                    <i class="fas fa-project-diagram"></i> Projeler
                </a>
                <div class="user-profil">
                    <img src="avatar.png" alt="Profil" class="user-avatar">
                    <span class="user-name">Can Yılmaz</span>
                    <i class="fas fa-chevron-down"></i>
                </div>
            </nav>
        </header>
    
        <aside class="app-sidebar">
            <ul class="side-menu">
                <li><a href="#" class="active"><i class="fas fa-chart-line"></i> Genel Bakış</a></li>
                <li><a href="#"><i class="fas fa-tasks"></i> Görevler</a></li>
                <li><a href="#"><i class="fas fa-envelope"></i> Mesajlar</a></li>
                <li class="menu-baslik">Yönetim</li>
                <li><a href="#"><i class="fas fa-users"></i> Ekip</a></li>
                <li><a href="#"><i class="fas fa-cogs"></i> Ayarlar</a></li>
            </ul>
        </aside>
    
        <main class="app-main">
            <div class="ozet-kart">
                <header class="kart-header">
                    <h3>Hızlı Özet</h3>
                    <span class="kart-tarih">Bugün, 21 Mart</span>
                </header>
                <div class="kart-icerik">
                    <p>Proje durumu: <strong>Aktif</strong>. Son güncelleme 15 dakika önce yapıldı.</p>
                </div>
                <footer class="kart-footer">
                    <button class="btn btn-secondary">Reddet</button>
                    <button class="btn btn-primary">Onayla</button>
                </footer>
            </div>
        </main>
    </div>
</body>

</html>
/* style.css */

/* Temel Sıfırlama ve Font */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', system-ui, sans-serif;
    background-color: #f1f5f9;
    color: #1e293b;
}

/* 1. KATMAN (MAKRO): Uygulama Şablonu (GRID) */
.app-konteyner {
    display: grid;
    /* İskelet planı: Header tam genişlik, Sidebar sabit, İçerik esnek */
    grid-template-areas:
        "header header"
        "sidebar main";
    grid-template-columns: 260px 1fr;
    grid-template-rows: 80px 1fr;
    min-height: 100vh;
}

/* --- HEADER --- */
.app-header {
    grid-area: header;
    background: #0f172a;
    /* Derin mavi-siyah */
    color: white;
    padding: 0 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.brand {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 1.4rem;
    font-weight: bold;
    letter-spacing: -0.5px;
}

.brand i {
    color: #3b82f6;
}

/* Mavi vurgulu ikon */

.top-nav {
    display: flex;
    align-items: center;
    gap: 25px;
}

.nav-item {
    color: #e2e8f0;
    text-decoration: none;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: color 0.3s;
}

.nav-item:hover {
    color: #fff;
}

.user-profil {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 15px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50px;
    cursor: pointer;
}

.user-avatar {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.user-name {
    font-weight: 500;
}

/* --- SIDEBAR --- */
.app-sidebar {
    grid-area: sidebar;
    background: #ffffff;
    border-right: 1px solid #e2e8f0;
    padding: 30px 20px;
}

.side-menu {
    list-style: none;
}

.side-menu li {
    margin-bottom: 8px;
}

.side-menu li a {
    color: #475569;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 18px;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.side-menu li a:hover,
.side-menu li a.active {
    background-color: #eff6ff;
    color: #2563eb;
}

.side-menu li a.active i {
    color: #2563eb;
}

.side-menu .menu-baslik {
    color: #94a3b8;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 25px;
    margin-bottom: 10px;
    font-weight: bold;
}

/* --- MAIN & KART --- */
.app-main {
    grid-area: main;
    padding: 40px;
}

.ozet-kart {
    background: white;
    padding: 30px;
    border-radius: 15px;
    width: 100%;
    max-width: 450px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
}

.kart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 15px;
}

.kart-header h3 {
    font-size: 1.3rem;
    color: #1e293b;
    font-weight: 600;
}

.kart-tarih {
    color: #94a3b8;
    font-size: 0.9rem;
}

.kart-icerik p {
    color: #64748b;
    line-height: 1.6;
    font-size: 0.95rem;
}

.kart-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* Temel Buton Stilleri */
.btn {
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.9rem;
    transition: background-color 0.3s ease;
}

.btn-primary {
    background: #3b82f6;
    color: white;
}

.btn-primary:hover {
    background: #2563eb;
}

.btn-secondary {
    background: #f1f5f9;
    color: #475569;
}

.btn-secondary:hover {
    background: #e2e8f0;
}
Seviye 5

Grid Area İsimlendirme Görsel Planlama: grid-area ve grid-template-areas

Görsel Planlama: CSS Haritası

Grid'in en güçlü ve okunaklı özelliklerinden biri, sayfanın ana düzenini, satır ve sütun numaraları ( grid-column: 1 / 4; ) yerine anlamlı isimlerle tanımlama yeteneğidir.

Bu yöntem, geliştiricilerin bir sayfanın temel düzenini, tıpkı kağıt üzerinde bir görsel plan çizer gibi, doğrudan CSS kodu içinde tanımlamasına olanak tanır.

Bu sayede, karmaşık çizgi numaralarını akılda tutmak yerine, kodun yapısı görsel bir haritaya dönüşür.

Grid-template-areas: Alanların Şekillendirilmesi

Alan isimlendirme süreci, Grid Kapsayıcıda grid-template-areas özelliği ile başlar.

Bu, sayfanın düzenini dize (string) olarak tanımlar.

Her dize bir satırı, dize içindeki kelimeler ise sütunları temsil eder. 

.page-layout {
  display: grid;
  grid-template-columns: 200px 1fr 1fr; /* Üç Sütun */
  grid-template-areas: 
    "header header header" /* Birinci Satır */
    "nav    main   main"   /* İkinci Satır */
    "nav    ad     ad"     /* Üçüncü Satır */
    "footer footer footer"; /* Dördüncü Satır */
}

Not: Aynı alan adını yan yana veya alt alta tekrarlamak ( "header header header"), o alanın birden fazla hücreyi birleştirmesini ( merge ) sağlar, nokta (.) kullanmak, o hücrenin boş kalmasını sağlar.

grid-area: Öğeyi Haritaya Yerleştirme

Kapsayıcıda alanlar tanımlandıktan sonra, ilgili Grid öğeleri (.header, .nav vb.), grid-area özelliği ile bu alanlara atanır. 

.header {
  grid-area: header; /* Üç sütunu kaplar */
}
.navigation {
  grid-area: nav;    /* İki satırı kaplar */
}

Bu yaklaşımın en büyük avantajı, düzenin değiştirilmesinin son derece kolay ve güvenli hale gelmesidir.

Örneğin: Kenar çubuğunu ( nav ) soldan sağa almak için, geliştiricinin yapması gereken tek şey Grid tanımındaki dizeyi güncellemektir: 

/* Soldan Sağa Değişiklik */
grid-template-areas: 
  "header header header"
  "main   main   nav"    /* Navigasyonu sağa taşıdık */
  "ad     ad     nav"
  "footer footer footer";

Bu işlem, HTML yapısına dokunmadan, sadece CSS'teki görsel harita tanımını güncelleyerek anında gerçekleştirilir.

Kapsayıcıda Alan Tanımlama grid-template-areas: Düzenleme Haritası Oluşturma

Görsel Şema Olarak Tasarım

grid-template-areas kuralı , Grid Kapsayıcıda ( Parent ) tanımlanır ve tüm ızgaranın haritasını, satır ve sütun çizgileri yerine anlamsal isimlerle çıkarır.

Felsefesi: Geliştiriciler, bu kuralı kullanarak sayfanın ana düzenini, kod satırları değil, görsel bir şema olarak tasarlar.

Bu, düzenin nasıl göründüğünü anlamak için Grid tanımına bakmanın, sayfanın ortasındaki bir kod bloğuna bakmaya kıyasla çok daha hızlı ve sezgisel olmasını sağlar.

Satır ve Sütun Temsili

Kural, tırnak işaretleri içinde birden fazla dizeden (string) oluşur.

Her dize ızgaranın yataydaki bir satırını, dize içindeki boşlukla ayrılmış her isim ise bir sütun hücresini temsil eder. 

.page-grid {
  grid-template-areas:
    "header header header" /* 1. Satır: Tamamen header */
    "sidebar content content" /* 2. Satır: sidebar ve iki içerik sütunu */
    "footer footer footer"; /* 3. Satır: Tamamen footer */
}

Ön Koşul: grid-template-areas kuralını kullanabilmek için, önce kaç sütun olacağını grid-template-columns ile tanımlamak gerekir.

Yukarıdaki örnekte, her satırda üç isim ( veya kelime ) olduğu için, Grid'in üç sütunlu olması beklenir.

Hücre Birleştirme (Merging) Mekanizması

Alan Birleştirme (Merging): Bu kuralın en önemli özelliği, aynı ismin yan yana ( veya alt alta ) tekrarının, o hücrelerin birleşerek tek bir büyük bölgeyi tanımlamasını sağlamasıdır.

Örneğin: "header header header" kuralı, üç sütunun yatayda birleşerek header adlı tek bir alanı oluşturmasını emreder.

Boşluk Bırakma: Bir hücrenin boş kalması ve hiçbir alana atanmaması isteniyorsa, o hücreye nokta işareti (.) konur.

Bu, planlamayı daha da esnek hale getirir. "content . sidebar".

</>
Görsel Haritalama: grid-template-areas ile Tasarım Planlama Örneği (+) 
<!DOCTYPE html>
<html lang="tr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video İzleme Platformu Arayüzü</title>
    <link rel="stylesheet" href="style.css?v=1.0.150">
</head>

<body>
    <div class="video-platform-grid">
        <header class="ust-bilgi">
            <div class="logo-alan">
                <i class="fab fa-youtube" style="color: #ff0000; font-size: 1.8rem;"></i>
                <span>VideoStream</span>
            </div>
            <div class="arama-bar">
                <input type="text" placeholder="Ara...">
                <button><i class="fas fa-search"></i></button>
            </div>
        </header>

        <nav class="yan-menu">
            <div class="menu-grup">
                <a href="#" class="aktif"><i class="fas fa-home"></i> Ana Sayfa</a>
                <a href="#"><i class="fas fa-bolt"></i> Shorts</a>
                <a href="#"><i class="fas fa-layer-group"></i> Abonelikler</a>
            </div>
            <hr>
            <div class="menu-grup">
                <span class="grup-baslik">Siz</span>
                <a href="#"><i class="fas fa-history"></i> Geçmiş</a>
                <a href="#"><i class="fas fa-clock"></i> Daha sonra izle</a>
            </div>
        </nav>

        <main class="video-alani">
            <div class="video-player">
                <i class="fas fa-play-circle"></i>
            </div>
            <div class="video-detay">
                <h1>CSS Grid ile Görsel Haritalama Dersi</h1>
                <div class="video-stats">1.2 Mn görüntüleme • 2 saat önce</div>
            </div>
        </main>

        <aside class="reklam-alani">
            <div class="reklam-kart">
                <span class="reklam-etiket">Sponsorlu</span>
                <img src="example.png" alt="Ad">
                <p>Modern Tasarım Kursu %50 İndirimle!</p>
            </div>
        </aside>

        <footer class="alt-bilgi">
            <div class="footer-links">
                <a href="#">Hakkında</a> • <a href="#">Telif Hakkı</a> • <a href="#">Gizlilik</a>
            </div>
        </footer>
    </div>
</body>

</html>
/* style.css */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', sans-serif;
}

.video-platform-grid {
    display: grid;
    gap: 0;
    /* Alanlar arası boşluğu sıfırlayıp borderlar ile ayıracağız, daha modern durur */
    min-height: 100vh;
    background-color: #ffffff;

    /* 1. İSKELET TANIMI (GRID) */
    grid-template-columns: 240px 1fr 300px;
    grid-template-rows: 60px 1fr 50px;
    grid-template-areas:
        "header  header  header"
        "nav     video   ads"
        "footer  footer  footer";
}

/* 2. ALAN ATAMALARI */
.ust-bilgi {
    grid-area: header;
    border-bottom: 1px solid #e5e5e5;
}

.yan-menu {
    grid-area: nav;
    border-right: 1px solid #e5e5e5;
}

.video-alani {
    grid-area: video;
    background: #f9f9f9;
    padding: 24px;
}

.reklam-alani {
    grid-area: ads;
    padding: 24px;
    border-left: 1px solid #e5e5e5;
}

.alt-bilgi {
    grid-area: footer;
    border-top: 1px solid #e5e5e5;
    background: #fff;
}

/* 3. MODERN TASARIM DOKUNUŞLARI (ORTA SEVİYE) */

/* Header Tasarımı */
.ust-bilgi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
}

.logo-alan {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
    font-size: 1.2rem;
    cursor: pointer;
}

.arama-bar {
    display: flex;
    width: 40%;
}

.arama-bar input {
    flex: 1;
    padding: 8px 15px;
    border: 1px solid #ccc;
    border-radius: 20px 0 0 20px;
    outline: none;
}

.arama-bar button {
    padding: 0 20px;
    border: 1px solid #ccc;
    border-left: none;
    border-radius: 0 20px 20px 0;
    cursor: pointer;
}

/* Sidebar Menü */
.yan-menu {
    padding: 15px 10px;
}

.menu-grup {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 15px;
}

.grup-baslik {
    padding: 10px;
    font-weight: bold;
    font-size: 0.9rem;
    color: #606060;
}

.yan-menu a {
    text-decoration: none;
    color: #0f0f0f;
    padding: 10px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: 0.2s;
}

.yan-menu a:hover {
    background: #f2f2f2;
}

.yan-menu a.aktif {
    background: #f2f2f2;
    font-weight: bold;
}

/* Video Alanı */
.video-player {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.video-detay {
    margin-top: 20px;
}

.video-detay h1 {
    font-size: 1.4rem;
    margin-bottom: 8px;
    color: #0f0f0f;
}

.video-stats {
    color: #606060;
    font-size: 0.9rem;
}

/* Reklam Kartı */
.reklam-kart {
    background: #fff;
    border: 1px solid #e5e5e5;
    padding: 10px;
    border-radius: 10px;
}

.reklam-etiket {
    font-size: 0.7rem;
    background: #eee;
    padding: 2px 6px;
    border-radius: 4px;
}

.reklam-kart img {
    width: 100%;
    border-radius: 6px;
    margin: 10px 0;
}

.reklam-kart p {
    font-size: 0.9rem;
    font-weight: 500;
}

/* Footer */
.alt-bilgi {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: #606060;
}

.footer-links a {
    text-decoration: none;
    color: #606060;
}
Seviye 6

İleri Düzey Hizalama (Alignment) Özellikleri Kapsamlı ve Tutarlı Hizalama Seti

Geleneksel Zorluklara Son

CSS Grid ve Flexbox, öğeleri yatay ve dikey olarak hizalamak için kapsamlı ve tutarlı bir özellik setini paylaşır.

Bu hizalama mekanizmaları, geleneksel CSS'in (margin: auto ve position) getirdiği hizalama zorluklarını tamamen ortadan kaldırır.

Bu sistem, öğeleri sadece yerleştirmekle kalmaz, aynı zamanda içeriğin kapsayıcı içindeki konumunu, aralarındaki boşlukların nasıl dağıtılacağını ve bir hücre içindeki bireysel öğenin nasıl konumlanacağını hassas ve öngörülebilir bir şekilde kontrol etmeyi sağlar.

İki Katmanlı Hizalama Modeli

Grid hizalama sistemi, iki farklı seviyede çalışır ve bu ayrımı anlamak kritik öneme sahiptir:

1. Kapsayıcı Seviyesi (Container Alignment): Grid içindeki tüm öğelerin, kapsayıcı alanı içinde nasıl hizalanacağını belirler.

justify-content (yatay eksen) ve align-content (dikey eksen), boş alanın dağıtımını kontrol eder.

2. Öğe Seviyesi (Item Alignment): Her bir Grid öğesinin, kendi hücresi içinde nasıl konumlanacağını belirler.

justify-items ve align-items, öğenin hücre içindeki hizalamasını kontrol eder.

Bireysel Override: Tek bir öğe için hizalama değiştirilmek istendiğinde justify-self ve align-self kullanılır.

Eksen Mantığı (Axis Logic)

Grid'de hizalama mantığı, iki temel eksen üzerinden çalışır:

Inline Axis (Yatay): justify-* ile kontrol edilir.

Block Axis (Dikey): align-* ile kontrol edilir.

Bu ayrım, Flexbox'taki main-axis / cross-axis kavramına benzer, ancak Grid'de eksenler sabittir ve içerik yönüne göre değişmez.

Tutarlı Değer Sistemi

Tüm hizalama özellikleri, ortak bir değer setini paylaşır:

start → başlangıca hizalar

end → sona hizalar

center → ortalar

stretch → varsayılan, alanı doldurur

Bu tutarlılık sayesinde, Grid ve Flexbox arasında geçiş yapmak son derece kolaydır ve öğrenilen hizalama mantığı tüm layout sistemlerinde tekrar kullanılabilir.

Öğeleri Konumlandırma (justify-items / align-items) Hücre İçi Hizalama Kurallarının Toplu Uygulanması

Toplu Hücre İçi Kontrol

Bu özellikler, Grid Kapsayıcıya uygulanır ve kapsayıcı içindeki her bir hücrenin içinde yer alan öğelerin nasıl konumlanacağını belirler. Kısacası, bunlar hücre içi hizalama kurallarını toplu olarak tüm çocuklara uygular.

Bu özelliklerin varsayılan değeri genellikle stretch'tir, yani öğeler, ait oldukları hücrenin tamamını doldurmaya çalışır.

Justify-items: Yatay Konumlandırma

justify-items özelliği, öğeleri satır ekseni boyunca, ait oldukları hücrenin içinde hizalar.

Bu, bir metin bloğunun sola ( start ), sağa ( end ) veya ortaya (center) hizalanması gibi düşünülebilir. 

.grid-container {
  /* Tüm öğeleri yatayda ortaya hizalar */
  justify-items: center; 
}
Align-items: Dikey Konumlandırma

align-items özelliği, öğeleri sütun ekseni boyunca, ait oldukları hücrenin içinde hizalar.

Bu, öğenin hücrenin üstünde ( start ), altında ( end ) veya tam ortasında ( center ) yer almasını sağlar.

Merkezleme Avantajı: Bu iki özellik, Grid'in en önemli avantajlarından birini sunar: Karmaşık CSS hileleri kullanmadan, bir hücrenin içindeki herhangi bir içeriği tek bir kuralda tam olarak merkezleme yeteneği: justify-items: center; align-items: center;

Hizalama Değerleri justify-items ve align-items Özellikleri
Değer
Tanım ve İşlevi
Etkisi ve Pratik Kullanım
start
İçeriği, ilgili eksenin başlangıç kenarına ( sol veya üst ) hizalar.
Yatayda ( justify ) sol kenara, dikeyde ( align ) üst kenara hizalar.
Yazı yönünün ( ltr/rtl ) değişmesi bu yönü de değiştirebilir.
end
İçeriği, ilgili eksenin bitiş kenarına ( sağ veya alt ) hizalar.
Yatayda ( justify ) sağ kenara, dikeyde ( align ) alt kenara hizalar.
center
İçeriği, ait olduğu hücrenin tam ortasına hizalar.
Hem justify-items: center hem de
align-items: center kullanıldığında, öğe hücrenin tam merkezine yerleşir.
stretch
Öğenin width veya height değeri açıkça belirtilmemişse, tüm hücreyi dolduracak şekilde esnemesini sağlar.
Bu, her iki eksende de varsayılan davranıştır.
Öğelerin, kendilerine atanan hücrenin boyutuna uzamasını sağlar.
self-start / self-end
Öğenin, kendine ait içeriğin başlangıç veya bitişine hizalanmasını sağlar.
Bu değerler, özellikle metin yönü değiştiğinde, içeriğin kendi yazma moduna göre hizalanmasını garanti eder.

Kapsayıcı İçeriğini Yönetme (justify-content / align-content) Toplu Boşluk Dağıtımı ve Kalan Alanın Yönetimi

Kalan Alanın Kontrolü (Space Distribution)

Bu özellikler, bir Grid veya Flexbox Kapsayıcıdaki tüm satırların ve sütunların kapsayıcı içinde nasıl bir araya geleceğini ve

kalan fazlalık boşluğun nasıl dağıtılacağını belirler.

Tetikleyici Koşul:Bu kurallar, öğeler küçültülmediğinde veya Grid'in toplam boyutu, kapsayıcının tamamını doldurmadığı durumlarda

( yani fazlalık bir alan kaldığında ) devreye girer.

Bu, öğelerin kendilerini değil, öğeler arasındaki ve etrafındaki boşluğu kontrol eder.

Justify-content: Yatay Dağıtım

justify-content, Ana Eksen üzerinde Grid/Flex öğeleri bittikten sonra kalan boşluğu yönetir.

Space-between: Öğeler arasına eşit boşluk bırakır (kenarlara boşluk bırakılmaz).

Space-around: Öğeler arasına ve kenarlara eşit boşluk bırakır (kenarlardaki boşluklar, aradaki boşluğun yarısıdır).

Center: Tüm öğe grubunu kapsayıcı içinde ortalar.

Align-content: Dikey Dağıtım

align-content, Çapraz Eksen ( Grid'de satırlar, Flexbox'ta sütunlar ) üzerinde Grid/Flex satırları bittikten sonra kalan boşluğu yönetir.

Bu özellik, Flexbox'ta flex-wrap: wrap; kullanıldığında birden fazla satır varsa kritik öneme sahiptir.

Grid'deki Önemi: Grid'de, toplam satırların yüksekliği kapsayıcının yüksekliğinden azsa, align-content özelliği, kalan dikey boşluğu satırlar arasında veya etrafında dağıtmayı sağlar, böylece tüm dikey alanı etkin bir şekilde kullanırız.

Akıllı Hizalama ve Boşluk Dağıtım Sistemi Flex ve Grid Yapılarında Hizalama, Dağıtım ve Bireysel Kontrol Kuralları
Değer
Tanım ve İşlevi
Kullanım Amacı ve Önemli Etkisi
space-between
Tüm çizgileri/satırları kapsayıcının kenarlarına yapıştırır ve aradaki boşluğu eşit dağıtır.
İçeriğin kapsayıcı içinde kenarlara sıfır olacak şekilde yayılmasını sağlar. ( Bir navigasyon menüsünde logo solda, linkler sağda olmalı.)
space-around
Her bir satır/sütun grubunun etrafına eşit boşluk koyar.
Boşluğun tüm öğelerin çevresinde dağılmasını isteyen estetik düzenlemeler için kullanılır.
Kenar boşlukları, öğeler arasındaki boşluğun yarısı kadar olacaktır.
space-evenly
Tüm öğeler arasına ve kenarlarına tamamen eşit miktarda boşluk dağıtır.
Boşlukların görsel olarak tutarlı ve simetrik görünmesini sağlar.
start / end
Tüm Grid/Flex çizgilerini, ilgili eksenin başlangıç veya bitiş kenarına toplar.
Öğelerin toplu olarak kapsayıcının bir köşesine veya kenarına hizalanmasını sağlar.
center
Tüm Grid/Flex çizgilerini ve öğe grubunu, kapsayıcının tam ortasına hizalar.
Tüm Grid'in veya Flex satırının, tarayıcı penceresinde yatay ve/veya dikey olarak ortalanmasını sağlayan kritik bir kuraldır.
Özellik
Tanım ve İşlevi
Avantajı ve Pratik Kullanım
place-items
(Kısayol)
align-items (dikey) ve justify-items (yatay) değerlerini tek bir kuralda birleştirir.
Hücre İçi Merkezleme: Bu kısayol, bir öğeyi hücrenin içinde (hem yatay hem de dikeyde) tam olarak merkezlemek ( place-items: center; ) için tek satırda çözüm sunar, bu kod tekrarını önler.
place-content
(Kısayol)
align-content (dikey boşluk) ve
justify-content (yatay boşluk) değerlerini tek bir kuralda birleştirir.
Grid Yapısı Merkezleme: Tüm Grid yapısının kapsayıcı içinde kolayca merkezlenmesini veya boşluk dağıtımını tek satırda sağlar.
Genellikle Grid'i tarayıcı penceresinin ortasına almak için kullanılır.
justify-self / align-self
Öğenin, ebeveyne atanmış genel hizalama kuralını geçersiz kılarak, hücre içinde kendi hizalamasını bireysel olarak belirlemesini sağlar.
Bireysel Kontrol: Genel kuraldan farklı davranması gereken tek bir öğeyi ( bir butonu tüm öğeler ortalanmışken hücrenin solunda tutmak) kontrol etmek için kullanılır.
Bu, bir istisna kuralı yaratmanın temiz yoludur.
Seviye 6

Explicit Grid (Açık Grid) Planlı Yapı ve Kesin Tanımlama

Geliştirici Tarafından Bilinçli Tanımlama

Explicit Grid, Grid Kapsayıcıda grid-template-columns ve grid-template-rows gibi özellikler kullanılarak **geliştirici tarafından bilinçli ve kesin olarak** tanımlanan satır ve sütun çizgilerinden oluşan ızgara yapısıdır.

Oluşum Mekanizması: Açık Grid, grid-template-columns: 1fr 1fr 1fr; gibi kesin boyut değerleri verilerek oluşturulur.

Bir kez bu çizgiler tanımlandığında, Grid Öğeleri bu çizgilerin arasına yerleştirilmeye hazırdır.

Track ve Çizgi Sayısı İlişkisi

Grid'de iz (track, yani satır veya sütun) sayısı ile çizgi (line) sayısı arasında matematiksel bir ilişki vardır: N sayıda iz (track) tanımladığınızda, otomatik olarak N+1 sayıda çizgi oluşur.

Örneğin: grid-template-columns: 1fr 1fr 1fr; kuralı ile 3 sütun tanımlanır ve bu sütunları çevreleyen 4 adet dikey çizgi oluşur.

Bu ilişki, çizgi numaralarıyla konumlandırmanın (Line-Based Placement) temelini oluşturur.

Bakım Kolaylığı ve Öngörülebilirlik

Açık Grid, tamamen öngörülebilirdir, geliştirici, Grid Öğelerini yerleştirirken hangi çizgi numaralarını veya alan isimlerini hedefleyeceğini kesin olarak bilir.

Bu öngörülebilirlik, kodun bakımını kolaylaştırır ve düzenleme hatalarını ( layout bugs ) en aza indirir.

Kullanım Amacı: Sayfanın ana iskeleti (başlık, kenar çubuğu ve ana içerik) gibi kritik, statik yapılar daima Açık Grid kullanılarak tanımlanmalıdır.

Bu, projenin temel yapısının stabil olmasını garanti eder.

Implicit Grid (Örtük Grid) Otomatik Oluşum ve Güvenlik Ağı

Tarayıcı Tarafından Otomatik Oluşturulan Yapı

Implicit Grid, geliştirici tarafından bilinçli olarak tanımlanmayan, ancak Grid Öğelerinin Açık Grid'in tanımlı sınırlarının dışına taştığı zaman tarayıcı tarafından otomatik olarak oluşturulan ek satır veya sütunlardan oluşur.

Bu yapı, Grid sisteminin esnekliğini korumak ve içerik taşması durumunda düzenin tamamen bozulmasını engellemek için tasarlanmış bir

"güvenlik ağıdır".

Taşma Esnekliği Senaryoları

Örtük Grid, iki temel durumda ortaya çıkar:

  • 1. Yerleştirme Dışı (Out-of-Bounds Placement): Geliştirici, Grid'i sadece 3 sütun olarak tanımlar, ancak bir öğeyi grid-column-start: 5; ile 5. çizgiye yerleştirmeye çalıştığında. Tarayıcı, bu 5. çizgiyi oluşturmak için 4. ve 5. sütunları otomatik olarak yaratır.
  • 2. Otomatik Akış (Auto-Flow): grid-auto-flow kuralı, Grid Öğelerinin tanımlı alanı doldurduktan sonra yeni satırlara akmasını emrettiğinde. Oluşan bu yeni satırlar, boyutları Açıkça tanımlanmadığı sürece Örtük Grid'in bir parçasıdır.
Otomatik İzlerin Boyut Kontrolü

Örtük olarak oluşan bu satır ve sütunların boyutlarının belirsiz olmaması için özel kurallarla kontrol edilmeleri gerekir:

  • Grid-auto-rows: Otomatik olarak oluşan satırlara varsayılan bir boyut atar ( grid-auto-rows: 150px; ).
  • Grid-auto-columns: Otomatik olarak oluşan sütunlara varsayılan bir boyut atar.

Risk Yönetimi ve En İyi Uygulama: Örtük Grid'in kendiliğinden boyutu, içeriğine ( auto ) göre belirleneceği için, bir öğe yanlışlıkla bu alana yerleştiğinde, düzenleme sorunları ( Layout bugs ) ve beklenmedik taşmalar ortaya çıkabilir.

Bu durum, Grid'in mantıksal olarak karmaşıklaşmasına neden olur.

En İyi Uygulama: Örtük Grid'in varlığını bilmek ve onu grid-auto-rows gibi kurallarla kontrol altında tutmak önemlidir. Ancak, sayfanın ana iskeleti ve tüm kritik yapılar daima Açık Grid kullanılarak tanımlanmalıdır.

Bu Ayrımın Performans Etkileri Explicit vs Implicit Grid: Layout Maliyeti ve Hız

Öngörülebilirlik ve Hız (Açık Grid)

Açık Grid, tarayıcının tüm sütun ve satır çizgilerinin konumunu ve boyutlarını CSSOM oluşurken önceden bilmesini sağlar.

Maliyet Etkisi: Bu öngörülebilirlik, tarayıcının Layout hesaplamasını daha hızlı ve daha az maliyetli yapmasını sağlar, çünkü herhangi bir dinamik karar vermesine gerek kalmaz.

Tarayıcı, hücrelerin nerede başlayıp nerede biteceğini anında belirler.

Bu, sayfanın ilk oluşturma süresini kısaltmaya yardımcı olur.

Örtük Hesaplama Maliyeti (Runtime Maliyeti)

Örtük Grid alanları oluştuğunda, tarayıcı bu yeni, geliştirici tarafından tanımlanmamış satır ve sütunların boyutlarını anlık olarak hesaplamak zorundadır.

Dinamik Maliyet: Bu dinamik, beklenmedik hesaplama, özellikle sayfa yükleme sırasında veya JavaScript dinamik olarak yeni öğeler eklediğinde ek işlemci yüküne neden olabilir.

Bu durum, sayfanın Layout sürecini yavaşlatabilir ve kullanıcı arayüzü akıcılığını etkileyebilir.

En İyi Uygulama: Explicit Kontrol

Mimarinin Güvencesi: Geliştiriciler, sayfanın ana iskeletini ve beklenen tüm alanlarını daima Açık Grid olarak tanımlamalıdır.

Bu, grid-template-areas veya kesin çizgi numaraları kullanılarak sağlanır.

Örtük Grid'in oluşumunu ise yalnızca beklenmedik içerik taşmaları veya sonsuz listeler gibi dinamik durumlar için, boyutlarını grid-auto-rows gibi kurallarla önceden belirleyerek, bilinçli bir güvenlik mekanizması olarak kullanmalıdır.

Bu, CSS kodunun performansını garanti altına alan temel bir mimari kuraldır.

© 2025 Byteomi - Modern Web Geliştirme Platformu

Bu web sitesindeki içerikler, editörün özgün çalışması olup; ChatGPT, Google Gemini ve DeepSeek yapay zeka modelleri fikir danışmanlığı, teknik kontrol ve içerik zenginleştirme amacıyla kullanılmıştır. Tüm metinler ve kod örnekleri editör kontrolünden geçirilerek yayınlanmaktadır.

Popüler Linkler

HTML Giriş
CSS Giriş
JavaScript Giriş
Algoritma Giriş

İkonlar Font Awesome tarafından sağlanmaktadır.

Tarayıcı uyumluluk kontrolü: CanIUse