CSS Grid ile iki boyutlu sayfa düzeni, fr birimi ve template areas.
CSS Grid iki boyutlu (hem satır hem sütun) düzen için tasarlanmıştır. Flexbox tek yönlü, Grid çift yönlüdür. Sayfa iskeletini Grid, içindeki küçük bileşenleri Flexbox ile yapın.
fr (fraction — kesir), kullanılabilir boşluğun paylarını temsil eder. 1fr 2fr demek birinci sütun 1 pay, ikinci sütun 2 pay demektir.
Kod içinde ASCII sanatı gibi düzen çizebilirsiniz. Her kelime bir alan adını temsil eder. Nokta (.) boş hücre demektir.
.grid-kapsayici {
display: grid;
/* Sütun tanımı */
grid-template-columns: 200px 1fr 1fr; /* sabit + iki eşit */
grid-template-columns: repeat(3, 1fr); /* 3 eşit sütun */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* responsive */
/* Satır tanımı */
grid-template-rows: auto 1fr auto; /* header, içerik, footer */
/* Boşluklar */
gap: 20px;
row-gap: 16px;
column-gap: 24px;
/* Tam sayfa düzeni */
min-height: 100vh;
}
/* Öğenin kaplayacağı alanı belirle */
.sidebar { grid-column: 1; grid-row: 1 / 3; } /* 1. satırdan 3. satıra kadar */
.baslik { grid-column: 2 / 4; } /* 2. sütundan 4. sütuna kadar */
.icerik { grid-column: span 2; } /* 2 sütun kapla */
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<style>
* { box-sizing: border-box; margin: 0; }
body { font-family: sans-serif; min-height: 100vh; }
.sayfa {
display: grid;
grid-template-areas:
"header header"
"sidebar icerik"
"footer footer";
grid-template-columns: 220px 1fr;
grid-template-rows: 60px 1fr 50px;
min-height: 100vh;
gap: 0;
}
.header { grid-area: header; background: #1e293b; color: white; display: flex; align-items: center; padding: 0 24px; font-weight: bold; }
.sidebar { grid-area: sidebar; background: #f1f5f9; padding: 20px; border-right: 1px solid #e2e8f0; }
.icerik { grid-area: icerik; padding: 24px; }
.footer { grid-area: footer; background: #1e293b; color: rgba(255,255,255,0.6); display: flex; align-items: center; padding: 0 24px; font-size: 13px; }
.sidebar ul { list-style: none; padding: 0; }
.sidebar li { padding: 8px 0; border-bottom: 1px solid #e2e8f0; font-size: 14px; cursor: pointer; }
.sidebar li:hover { color: #6366f1; }
/* Kart Grid */
.kart-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 16px;
margin-top: 16px;
}
.kart { background: white; border: 1px solid #e2e8f0; border-radius: 10px; padding: 16px; text-align: center; }
.kart .sayi { font-size: 28px; font-weight: bold; color: #6366f1; }
.kart .etiket { font-size: 12px; color: #94a3b8; margin-top: 4px; }
</style>
</head>
<body>
<div class="sayfa">
<header class="header"></> Furkan Bacanlı Admin</header>
<nav class="sidebar">
<p style="font-size:11px;color:#94a3b8;margin-bottom:12px;text-transform:uppercase;letter-spacing:1px">Menü</p>
<ul>
<li>📊 Dashboard</li>
<li>📚 Dersler</li>
<li>👥 Kullanıcılar</li>
<li>⚙ Ayarlar</li>
</ul>
</nav>
<main class="icerik">
<h2 style="margin-bottom:4px">Dashboard</h2>
<p style="color:#64748b;font-size:14px">Hoş geldiniz!</p>
<div class="kart-grid">
<div class="kart"><div class="sayi">142</div><div class="etiket">Toplam Ders</div></div>
<div class="kart"><div class="sayi">2.4K</div><div class="etiket">Ziyaretçi</div></div>
<div class="kart"><div class="sayi">38</div><div class="etiket">Kategori</div></div>
<div class="kart"><div class="sayi">96%</div><div class="etiket">Uptime</div></div>
</div>
</main>
<footer class="footer">© 2024 KodLab — Tüm hakları saklıdır.</footer>
</div>
</body>
</html>