📖 Düzen (Layout)
display: grid (İki Boyutlu CSS Izgara Düzeni)
Aynı anda hem satırları hem de sütunları yönetebilen iki boyutlu güçlü ızgara düzen sistemidir.
⚡ Sözdizimi (Syntax)
display: grid;
🛠️ Pratik Kullanım Örnekleri
📌 Otomatik Uyumlu (Auto-Fit) Responsive Kart Izgarası
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}
📌 Alan İsimlendirmeli (Grid Template Areas) Sayfa İskeleti
.app {
display: grid;
grid-template-areas:
'header header'
'sidebar main'
'footer footer';
}
💡
Mühendislik İpucu & En İyi Pratik:
`repeat(auto-fit, minmax(280px, 1fr))` yapısı hiçbir media query yazmadan tüm ekranlarda kusursuz çalışır.
İlgili Kılavuzlar
display: flex (Esnek Kutu Düzeni - Flexbox)
display: grid (İki Boyutlu CSS Izgara Düzeni)
position: sticky (Kaydırmaya Bağlı Sabitlenen Başlıklar)
backdrop-filter (Buzlu Cam & Glassmorphism Efekti)
clamp() (Akıcı Tipografi ve Dinamik Boyutlandırma)
:has() Ebeveyn Seçici (Parent Selector)
aspect-ratio (En-Boy Oranı Kilitleme)