C
Bölüm 5: CSS Grid ile İleri Düzey Layout Tasarımı
Genel Bakış

Bölüm 5: CSS Grid ile İleri Düzey Layout Tasarımı

furkanczay furkanczay
15 Haziran 2025
8 dk okuma süresi
css grid layout advanced
css-grid-ileri-layout

CSS Grid Nedir?

CSS Grid, iki boyutlu layout sistemi olarak CSS’in en güçlü özelliklerinden biridir. Flexbox’ın tek boyutlu yapısından farklı olarak, Grid hem satırlarda hem sütunlarda eş zamanlı kontrol sağlar.

Grid vs Flexbox

ÖzellikFlexboxCSS Grid
BoyutTek boyutlu (1D)İki boyutlu (2D)
KullanımBileşen layoutuSayfa layoutu
HizalamaTek eksenHer iki eksen
ResponsiveİyiMükemmel

Grid Temel Kavramları

Grid Container ve Grid Items

.grid-container {
    display: grid;
}
 
.grid-item {
    /* Container içindeki öğeler otomatik grid item olur */
}

Grid Terminology

Grid Container
┌────────────────────────────────┐
│ Grid Item   │ Grid Item        │ ← Grid Line
├─────────────┼──────────────────┤
│ Grid Item   │ Grid Item        │
└────────────────────────────────┘
  ↑           ↑
Grid Track   Grid Cell

Grid Container Özellikleri

1. Grid Template Columns & Rows

.grid {
    display: grid;
    
    /* Sütun tanımlama */
    grid-template-columns: 200px 1fr 100px;     /* Sabit-Esnek-Sabit */
    grid-template-columns: repeat(3, 1fr);       /* 3 eşit sütun */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive */
    
    /* Satır tanımlama */
    grid-template-rows: 100px auto 50px;        /* Üst-İçerik-Alt */
    grid-template-rows: repeat(3, 150px);       /* 3 sabit satır */
}

2. Grid Gap

.grid {
    gap: 20px;              /* Hem satır hem sütun */
    gap: 20px 30px;         /* Satır-arası sütun-arası */
    
    /* Ayrı ayrı */
    row-gap: 20px;
    column-gap: 30px;
}

3. Grid Template Areas

.layout {
    display: grid;
    grid-template-areas:
        "header header header"
        "sidebar main aside"
        "footer footer footer";
    
    grid-template-columns: 200px 1fr 150px;
    grid-template-rows: auto 1fr auto;
    gap: 20px;
}
 
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }

HTML:

<div class="layout">
    <header class="header">Header</header>
    <aside class="sidebar">Sidebar</aside>
    <main class="main">Main Content</main>
    <aside class="aside">Right Sidebar</aside>
    <footer class="footer">Footer</footer>
</div>

4. Grid Auto Properties

.grid {
    /* Yeni satırlar için otomatik boyut */
    grid-auto-rows: 150px;
    grid-auto-rows: minmax(100px, auto);
    
    /* Yeni sütunlar için otomatik boyut */
    grid-auto-columns: 200px;
    
    /* Yeni öğelerin yerleşim yönü */
    grid-auto-flow: row;        /* Varsayılan: satır bazlı */
    grid-auto-flow: column;     /* Sütun bazlı */
    grid-auto-flow: dense;      /* Boşlukları doldur */
}

5. Grid Alignment

.grid {
    /* İçerik hizalama (grid container içinde) */
    justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
    align-content: start | end | center | stretch | space-around | space-between | space-evenly;
    
    /* Öğe hizalama (grid cell içinde) */
    justify-items: start | end | center | stretch;
    align-items: start | end | center | stretch;
    
    /* Kısayol */
    place-content: center;      /* justify-content + align-content */
    place-items: center;        /* justify-items + align-items */
}

Grid Item Özellikleri

1. Grid Line ile Yerleştirme

.item {
    /* Sütun pozisyonu */
    grid-column-start: 1;
    grid-column-end: 3;
    grid-column: 1 / 3;         /* Kısayol: başlangıç / bitiş */
    grid-column: 1 / span 2;    /* Başlangıç / kaç sütun */
    
    /* Satır pozisyonu */
    grid-row-start: 2;
    grid-row-end: 4;
    grid-row: 2 / 4;            /* Kısayol */
    grid-row: 2 / span 2;       /* Kaç satır */
    
    /* Kısayol: grid-row / grid-column */
    grid-area: 2 / 1 / 4 / 3;   /* row-start / col-start / row-end / col-end */
}

2. Grid Area ile Yerleştirme

.item {
    grid-area: header;          /* Template area kullanma */
}

3. Item Alignment

.item {
    /* Bu öğenin kendi hizalaması */
    justify-self: start | end | center | stretch;
    align-self: start | end | center | stretch;
    
    /* Kısayol */
    place-self: center;         /* justify-self + align-self */
}

Responsive Grid Units

1. fr Unit (Fractional)

.grid {
    grid-template-columns: 1fr 2fr 1fr;    /* 1:2:1 oranında */
    grid-template-columns: 200px 1fr;      /* Sabit + esnek */
    grid-template-columns: 1fr auto 1fr;   /* Esnek + içerik + esnek */
}

2. minmax() Fonksiyonu

.grid {
    grid-template-columns: repeat(3, minmax(200px, 1fr));
    grid-template-rows: minmax(100px, auto);
    
    /* Minimum 200px, maksimum sınırsız */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

3. auto-fit vs auto-fill

/* auto-fit: Boş sütunları daraltır */
.auto-fit {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
 
/* auto-fill: Boş sütunları korur */
.auto-fill {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

Pratik Grid Örnekleri

1. Klasik Website Layout

.website-layout {
    display: grid;
    grid-template-areas:
        "header header header"
        "nav main aside"
        "footer footer footer";
    
    grid-template-columns: 200px 1fr 150px;
    grid-template-rows: auto 1fr auto;
    
    min-height: 100vh;
    gap: 1rem;
    padding: 1rem;
}
 
.header {
    grid-area: header;
    background: #333;
    color: white;
    padding: 1rem;
    text-align: center;
}
 
.nav {
    grid-area: nav;
    background: #f5f5f5;
    padding: 1rem;
}
 
.main {
    grid-area: main;
    background: white;
    padding: 1rem;
}
 
.aside {
    grid-area: aside;
    background: #f0f0f0;
    padding: 1rem;
}
 
.footer {
    grid-area: footer;
    background: #333;
    color: white;
    padding: 1rem;
    text-align: center;
}
 
/* Responsive */
@media (max-width: 768px) {
    .website-layout {
        grid-template-areas:
            "header"
            "nav"
            "main"
            "aside"
            "footer";
        
        grid-template-columns: 1fr;
    }
}
.photo-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    padding: 1rem;
}
 
.photo-item {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}
 
.photo-item:hover {
    transform: translateY(-2px);
}
 
.photo-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
 
.photo-info {
    padding: 1rem;
}
 
/* Özel boyutlar için */
.photo-item.large {
    grid-column: span 2;
    grid-row: span 2;
}
 
.photo-item.wide {
    grid-column: span 2;
}
 
.photo-item.tall {
    grid-row: span 2;
}

3. Dashboard Layout

.dashboard {
    display: grid;
    grid-template-areas:
        "sidebar header header"
        "sidebar main main"
        "sidebar main main";
    
    grid-template-columns: 250px 1fr 1fr;
    grid-template-rows: 60px 1fr 1fr;
    
    height: 100vh;
    gap: 1rem;
}
 
.dashboard-sidebar {
    grid-area: sidebar;
    background: #2c3e50;
    color: white;
    padding: 1rem;
}
 
.dashboard-header {
    grid-area: header;
    background: white;
    border-bottom: 1px solid #eee;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
 
.dashboard-main {
    grid-area: main;
    padding: 1rem;
    overflow: auto;
}
 
/* Widget grid'i */
.widgets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
    height: 100%;
}
 
.widget {
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1rem;
}
 
.widget.large {
    grid-column: span 2;
}

4. Card Grid System

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
    padding: 2rem;
}
 
.card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    
    /* Grid item olarak yerleşim */
    display: grid;
    grid-template-rows: auto 1fr auto;
}
 
.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}
 
.card-image {
    height: 200px;
    background-size: cover;
    background-position: center;
}
 
.card-content {
    padding: 1.5rem;
    display: grid;
    gap: 1rem;
}
 
.card-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid #eee;
    background: #f9f9f9;
}
 
/* Farklı boyutlarda kartlar */
.card.featured {
    grid-column: span 2;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    grid-template-areas: "image content";
}
 
.card.featured .card-image {
    grid-area: image;
    height: auto;
}
 
.card.featured .card-content {
    grid-area: content;
}

5. Responsive Form Layout

.form-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
}
 
.form-group {
    display: grid;
    gap: 0.5rem;
}
 
.form-group label {
    font-weight: 600;
    color: #333;
}
 
.form-group input,
.form-group textarea,
.form-group select {
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
}
 
/* Responsive sütun alanları */
.col-12 { grid-column: span 12; }
.col-6 { grid-column: span 6; }
.col-4 { grid-column: span 4; }
.col-3 { grid-column: span 3; }
 
/* Mobil responsive */
@media (max-width: 768px) {
    .col-6,
    .col-4,
    .col-3 {
        grid-column: span 12;
    }
}
 
.submit-section {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #eee;
}

Grid ile Animasyonlar

.animated-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    padding: 1rem;
}
 
.grid-item {
    background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 2rem;
    text-align: center;
    border-radius: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
}
 
.grid-item:hover {
    transform: scale(1.05);
    grid-column: span 2;  /* Genişle */
    z-index: 1;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
 
/* Staggered animation */
.grid-item:nth-child(1) { animation-delay: 0.1s; }
.grid-item:nth-child(2) { animation-delay: 0.2s; }
.grid-item:nth-child(3) { animation-delay: 0.3s; }
 
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
 
.grid-item {
    animation: slideInUp 0.6s ease forwards;
}

Grid Debugging

Görsel Grid Lines

.debug-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
    
    /* Geliştirme sırasında grid çizgilerini göster */
    background-image: 
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent calc(8.33% - 1px),
            rgba(255,0,0,0.1) calc(8.33% - 1px),
            rgba(255,0,0,0.1) 8.33%
        );
}

DevTools Grid Inspector

Ipucu

DevTools İpucu: Modern tarayıcılarda grid container’ı seçip “Grid” simgesine tıklayarak grid çizgilerini ve alan adlarını görselleştirebilirsiniz.

Grid En İyi Uygulamaları

1. Semantic Grid Areas

/* ✅ İyi: Anlamlı alan adları */
.layout {
    grid-template-areas:
        "header header"
        "nav main"
        "footer footer";
}
 
/* ❌ Kötü: Anlamsız adlar */
.layout {
    grid-template-areas:
        "a a"
        "b c"
        "d d";
}

2. Responsive First

/* Mobile first yaklaşım */
.grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
 
/* Tablet */
@media (min-width: 768px) {
    .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
 
/* Desktop */
@media (min-width: 1024px) {
    .grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

3. Grid with Fallbacks

.grid-container {
    /* Fallback for older browsers */
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
 
.grid-item {
    flex: 1 1 300px;
}
 
/* Grid destekleyen tarayıcılar */
@supports (display: grid) {
    .grid-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
    
    .grid-item {
        flex: none;
    }
}

Pratik Egzersizler

  1. Magazine layout tasarlayın
  2. Dashboard oluşturun
  3. Photo gallery yapın
  4. Responsive form tasarlayın
  5. Complex website layout oluşturun

Sıradaki Bölüm

Bir sonraki bölümde Responsive Tasarım ve Media Queries öğreneceksiniz. Farklı cihazlara uyumlu web siteleri tasarlama sanatını keşfedeceksiniz.

Öğrendikleriniz:

  • ✅ CSS Grid temel kavramlarını
  • ✅ Template areas kullanımını
  • ✅ Grid alignment sistemini
  • ✅ Responsive grid patterns
  • ✅ Kompleks layout örneklerini

CSS Grid ile artık en karmaşık layoutları bile kolayca oluşturabilirsiniz! 🎯