- Katılım
- 6 Kas 2021
- Mesajlar
- 3,011
- Tepkime puanı
- 4,532
- Puanları
- 113
- Yaş
- 31
- Konum
- Türkiye
- Dc
- fatihbulut
CSS Grid Sistemi: Kapsamlı Rehber ve Uygulamalı Örnekler
CSS Grid, modern web geliştirmede en güçlü düzen (layout) araçlarından biridir. Bu kapsamlı rehberde, CSS Grid'in temel kavramlarını, özelliklerini ve gerçek dünya uygulamalarını detaylı kod örnekleriyle inceleyeceğiz.1. CSS Grid'e Giriş
CSS Grid Layout (Izgara Düzeni), iki boyutlu bir düzen sistemi sağlar. Flexbox'ın aksine hem satırlar hem de sütunlar üzerinde tam kontrol imkanı sunar.Grid'in Temel Yapısı
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>
CSS:
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 20px;
}
.grid-item {
background-color: #4a6fa5;
color: white;
padding: 20px;
text-align: center;
}- Grid Container: display: grid tanımlanan element
- Grid Item: Grid container'ın direkt çocukları
- Grid Line: Izgaranın bölümlerini ayıran çizgiler
- Grid Track: İki grid line arasındaki boşluk (satır veya sütun)
- Grid Cell: Bir satır ve bir sütunun kesiştiği alan
- Grid Area: Bir veya daha fazla grid cell'den oluşan alan
2. Grid Özellikleri ve Kullanımları
Grid Container Özellikleri
grid-template-columns ve grid-template-rows
CSS:
.grid-container {
display: grid;
grid-template-columns: 200px 1fr 2fr;
grid-template-rows: 100px auto 150px;
}- fr (fraction) birimi: Kullanılabilir boş alanın oransal dağılımı
- auto: İçerik boyutuna göre ayarlanır
- minmax(): Minimum ve maksimum boyut belirleme
CSS:
.grid-container {
grid-template-columns: minmax(100px, 250px) 1fr 2fr;
}grid-template-areas
CSS:
.grid-container {
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }gap (eski adıyla grid-gap)
CSS:
.grid-container {
gap: 20px; /* Hem row hem column gap */
row-gap: 15px;
column-gap: 30px;
}justify-items, align-items, place-items
CSS:
.grid-container {
justify-items: start; /* start | end | center | stretch (default) */
align-items: center; /* start | end | center | stretch (default) */
place-items: center stretch; /* align-items justify-items */
}justify-content, align-content, place-content
CSS:
.grid-container {
justify-content: space-between; /* start | end | center | stretch | space-around | space-between | space-evenly */
align-content: center;
place-content: center space-between;
}Grid Item Özellikleri
grid-column ve grid-row
CSS:
.grid-item {
grid-column: 1 / 3; /* Başlangıç ve bitiş grid line'ları */
grid-row: 1 / span 2; /* span ile kaç track kaplayacağını belirtebiliriz */
}- grid-column-start
- grid-column-end
- grid-row-start
- grid-row-end
grid-area
CSS:
.grid-item {
grid-area: 1 / 1 / 3 / 3; /* row-start / column-start / row-end / column-end */
}justify-self, align-self, place-self
CSS:
.grid-item {
justify-self: center;
align-self: end;
place-self: center end;
}3. Pratik Grid Örnekleri
Örnek 1: Responsive Kart Düzen
HTML:
<div class="card-grid">
<div class="card">Kart 1</div>
<div class="card">Kart 2</div>
<div class="card">Kart 3</div>
<div class="card">Kart 4</div>
<div class="card">Kart 5</div>
<div class="card">Kart 6</div>
</div>
CSS:
.card-grid {
display: grid;
gap: 20px;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
padding: 20px;
}
.card {
background: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
padding: 20px;
min-height: 150px;
}- repeat(auto-fill, minmax(250px, 1fr)): Minimum 250px genişliğinde, mümkün olduğunca çok sütun oluşturur
- Ekran genişliği değiştikçe otomatik olarak yeniden düzenlenir
Örnek 2: Magazine-Style Layout
HTML:
<div class="magazine-layout">
<div class="featured">Öne Çıkan</div>
<div class="secondary">İkincil</div>
<div class="tertiary">Üçüncül 1</div>
<div class="tertiary">Üçüncül 2</div>
<div class="tertiary">Üçüncül 3</div>
</div>
CSS:
.magazine-layout {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 300px 150px;
gap: 20px;
}
.featured {
grid-column: 1 / span 2;
grid-row: 1 / span 2;
background-color: #4a6fa5;
}
.secondary {
grid-column: 3 / span 2;
background-color: #3a5a8f;
}
.tertiary {
background-color: #2c4a7f;
}
/* Tüm grid öğeleri için ortak stiller */
.magazine-layout > div {
color: white;
padding: 20px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: bold;
}Örnek 3: Tam Sayfa Düzeni (Holy Grail Layout)
HTML:
<div class="holy-grail">
<header>Header</header>
<nav>Navigation</nav>
<main>Main Content</main>
<aside>Sidebar</aside>
<footer>Footer</footer>
</div>
CSS:
.holy-grail {
display: grid;
grid-template:
"header header header" 80px
"nav main aside" 1fr
"footer footer footer" 80px
/ 200px 1fr 200px;
min-height: 100vh;
gap: 1rem;
}
header { grid-area: header; background: #4a6fa5; }
nav { grid-area: nav; background: #3a5a8f; }
main { grid-area: main; background: #2c4a7f; }
aside { grid-area: aside; background: #1c3a6f; }
footer { grid-area: footer; background: #0c2a5f; }
/* Tüm öğeler için ortak stiller */
.holy-grail > * {
color: white;
padding: 1rem;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
@media (max-width: 768px) {
.holy-grail {
grid-template:
"header" 80px
"nav" auto
"main" 1fr
"aside" auto
"footer" 80px
/ 1fr;
}
}4. Gelişmiş Grid Teknikleri
Örtüşen (Overlapping) Öğeler
HTML:
<div class="overlap-grid">
<div class="image"></div>
<div class="content"></div>
</div>
CSS:
.overlap-grid {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 400px;
}
.image {
grid-column: 1;
grid-row: 1;
background: url('resim.jpg') center/cover;
z-index: 1;
}
.content {
grid-column: 1;
grid-row: 1;
background: rgba(74, 111, 165, 0.8);
color: white;
z-index: 2;
align-self: end;
padding: 2rem;
margin: 2rem;
}Auto Placement ve Dense Packing
CSS:
.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 100px;
gap: 10px;
grid-auto-flow: dense; /* Boşlukları doldurmak için */
}
.grid-item:nth-child(3n) {
grid-column: span 2;
grid-row: span 2;
background-color: #3a5a8f;
}Masonry Layout (CSS Grid Level 3)
CSS:
.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
grid-template-rows: masonry; /* Deneysel özellik */
}5. Grid ve Flexbox Birlikte Kullanımı
HTML:
<div class="combined-layout">
<header>Header</header>
<div class="content">
<aside>Sidebar</aside>
<main>
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>
</main>
</div>
<footer>Footer</footer>
</div>
CSS:
.combined-layout {
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
.content {
display: grid;
grid-template-columns: 250px 1fr;
gap: 20px;
}
main {
display: flex;
flex-wrap: wrap;
gap: 15px;
align-content: flex-start;
}
.card {
flex: 1 1 300px;
background: #f0f0f0;
padding: 20px;
border-radius: 8px;
}
/* Diğer stiller */
header, footer, aside {
padding: 20px;
background: #4a6fa5;
color: white;
}6. Grid ile Responsive Tasarım
repeat() ve auto-fit/auto-fill
CSS:
.responsive-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}- auto-fit: Mümkün olduğunca çok sütun oluşturur, boş sütunları sıkıştırır
- auto-fill: Mümkün olduğunca çok sütun oluşturur, boş sütunları boş bırakır
Media Query'lerle Grid Yeniden Düzenleme
CSS:
.grid-container {
display: grid;
grid-template-columns: 1fr;
gap: 15px;
}
@media (min-width: 600px) {
.grid-container {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 900px) {
.grid-container {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1200px) {
.grid-container {
grid-template-columns: repeat(4, 1fr);
}
}Grid ve clamp() Kullanımı
CSS:
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(clamp(200px, 25vw, 300px), 1fr));
gap: 20px;
}7. Gerçek Dünya Uygulaması: E-ticaret Ürün Listesi
HTML:
<div class="product-grid">
<div class="product-filters">Filtreler</div>
<div class="product-sort">Sıralama</div>
<div class="product-list">
<div class="product-card">Ürün 1</div>
<div class="product-card">Ürün 2</div>
<!-- Daha fazla ürün kartı -->
</div>
<div class="product-pagination">Sayfalar</div>
</div>
CSS:
.product-grid {
display: grid;
grid-template:
"filters sort" auto
"filters products" 1fr
"pagination pagination" auto
/ 250px 1fr;
gap: 30px;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.product-filters {
grid-area: filters;
background: #f8f9fa;
padding: 20px;
border-radius: 8px;
}
.product-sort {
grid-area: sort;
display: flex;
justify-content: flex-end;
align-items: center;
}
.product-list {
grid-area: products;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
}
.product-card {
background: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
padding: 20px;
display: flex;
flex-direction: column;
}
.product-pagination {
grid-area: pagination;
display: flex;
justify-content: center;
padding: 20px 0;
}
@media (max-width: 768px) {
.product-grid {
grid-template:
"sort" auto
"filters" auto
"products" 1fr
"pagination" auto
/ 1fr;
}
.product-filters {
position: sticky;
top: 0;
z-index: 100;
}
}Sonuç
CSS Grid, modern web geliştirmede devrim yaratmış bir teknolojidir. Bu rehberde gördüğümüz gibi:- İki boyutlu düzen için mükemmel bir çözüm sunar
- Karmaşık tasarımları kolayca oluşturmayı sağlar
- Responsive tasarım için güçlü araçlar içerir
- Flexbox ile birlikte kullanıldığında daha da güçlü hale gelir
- Kod miktarını azaltır ve bakımı kolaylaştırır
- fr birimini ve minmax() fonksiyonunu iyi anlayın
- grid-template-areas ile görsel düzen oluşturmayı deneyin
- auto-fit ve auto-fill arasındaki farkı öğrenin
- Tarayıcı desteğini her zaman kontrol edin (caniuse.com)
- Pratik yapmak için farklı layout örnekleri oluşturun
