CSS Grid ile Modern Dashboard Tasarımı

Günümüzde web tasarımında esneklik ve düzen önemli bir yer tutuyor. Özellikle dashboard (yönetim paneli) gibi çoklu bileşen içeren sayfalarda düzeni sağlamak, kullanıcı deneyimini iyileştirmek açısından kritik bir faktördür. Bu yazıda, CSS Grid kullanarak nasıl modern bir dashboard tasarlayabileceğimizi adım adım anlatacağız. CSS Grid, sayfanın bölümlere ayrılmasını kolaylaştıran güçlü bir CSS özelliğidir ve özellikle esnek tasarımlar için idealdir.

1. CSS Grid Nedir?

CSS Grid, ızgara tabanlı bir düzen oluşturmak için kullanılan güçlü bir CSS özelliğidir. Grid, sayfanın belirli alanlarını düzenlemek ve öğeleri esnek bir şekilde hizalamak için kullanılır. display: grid özelliği ile bir konteyner oluşturduğunuzda, içindeki öğeleri belirli satır ve sütunlara yerleştirebilirsiniz. CSS Grid’in en büyük avantajı, karmaşık düzenleri bile kolayca yönetebilmenizi sağlamasıdır.

CSS Grid’in Avantajları

• Esnek Tasarım: Responsive (mobil uyumlu) düzen oluşturmayı kolaylaştırır.
• Kolay Yönetim: Satır ve sütun bazlı bir yapı sunduğu için kod karmaşıklığını azaltır.
• Daha Az Kod: Flexbox’a kıyasla karmaşık düzenleri daha az CSS kodu ile oluşturabilirsiniz.
• Kapsamlı Tarayıcı Desteği: Modern tarayıcıların çoğu tarafından desteklenir.

2. Dashboard Yapısının Belirlenmesi

Bir dashboard, genellikle dört ana bileşenden oluşur:

• Header (Üst Menü): Sayfanın en üst kısmında, site başlığı ve bazı navigasyon butonlarını içerecek.
• Sidebar (Yan Menü): Sol tarafta olacak ve farklı sayfalara yönlendiren bağlantılar içerecek.
• Content (Ana İçerik Alanı): Orta alanda yer alacak ve kartlar (cards) gibi bileşenleri barındıracak.
• Footer (Alt Menü – Opsiyonel): Sayfanın en alt kısmında yer alarak ek bilgileri gösterebilir.

Bu düzeni oluşturmak için grid-template-areas özelliğini kullanacağız.

.dashboard {
    display: grid;
    grid-template-areas:
        "header header"
        "sidebar content";
    grid-template-columns: 250px 1fr;
    grid-template-rows: 60px auto;
    min-height: 100vh;
    gap: 10px;
}

Burada grid-template-areas özelliği ile sayfanın hangi bölümlerden oluştuğunu tanımlıyoruz:

• “header header” → Üst menü tüm genişliği kaplıyor.
• “sidebar content” → Sol tarafta sidebar, sağ tarafta ana içerik var.

3. Header (Üst Menü) Tasarımı

Header içinde bir logo ve bazı ikonlar bulunacak. Bu ikonlar tema değişikliği ve dil seçimleri için kullanılabilir.

.header {
    grid-area: header;
    background: #4a6ccc;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    font-size: 18px;
}

grid-area: header ile bu bölümü grid düzeninde tanımladığımız “header” alanına yerleştiriyoruz.

4. Sidebar (Yan Menü) Tasarımı

Sidebar, sayfanın sol tarafında olacak ve ana sayfa, hakkımızda ve iletişim gibi bağlantılar içerecek.

.sidebar {
    grid-area: sidebar;
    background: #4a6ccc;
    color: white;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

Burada grid-area: sidebar diyerek sidebar’ı ilgili alana yerleştiriyoruz. Sidebar genellikle navigasyon için kullanıldığı için, okunaklı ve erişilebilir olması önemlidir.

5. İçerik Alanının Düzenlenmesi

İçerik alanı (content), kartlardan oluşacak ve grid yapısıyla düzenlenecek. Kartlar farklı ekran boyutlarına uyum sağlamak için auto-fit kullanılarak esnek hale getirilecek.

.content {
    grid-area: content;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px;
}

Her bir kart için temel bir stil:

.card {
    background: white;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

6. Mobil Uyumluluk İçin CSS Grid

CSS Grid, mobil uyumlu tasarımlar oluşturmayı oldukça kolaylaştırır. @media queries kullanarak ekran boyutlarına göre özel düzenlemeler yapabilirsiniz.

@media (max-width: 768px) {
    .dashboard {
        grid-template-areas:
            "header"
            "content";
        grid-template-columns: 1fr;
    }
    .sidebar {
        display: none;
    }
}

Bu sayede küçük ekranlarda sidebar tamamen gizlenir ve içerik alanı tam genişlikte görüntülenir.

CSS Grid kullanarak oluşturduğumuz bu dashboard, modern ve esnek bir tasarım sunuyor. Grid sistemi, özellikle büyük ve karmaşık yapılı sayfalarda düzeni sağlamak için oldukça kullanışlıdır. CSS Grid’in gücünü kullanarak daha düzenli ve estetik arayüzler tasarlamak mümkündür.

Eğer daha fazla özelleştirme yapmak isterseniz, grid-template-columns, grid-template-rows ve gap gibi özelliklerle oynayabilirsiniz. CSS Grid, kod yazmayı daha keyifli hale getiren ve büyük projelerde hayat kurtaran bir araçtır. Daha fazlası için w3schools ziyaret edebilirsin. Ayrıca daha fazla örnek için “Kod Atölyesi” kategorisine bak.

index.html

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid Gelişmiş Dashboard</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">

</head>
<body>
    <div class="dashboard">
        <header class="header">
            <div class="logo">LOGO</div>
            <ul>
                <li>
                    <a href="#"><i class="bi bi-moon"></i></a>
                    <ul>
                        <li><a href="#">Açık Tema</a></li>
                        <li><a href="#">Koyu Tema</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#"><i class="bi bi-globe"></i></a>
                    <ul>
                        <li><a href="#">Türkçe</a></li>
                        <li><a href="#">İngilizce</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#"><i class="bi bi-person"></i></a>
                </li>
            </ul>
        </header>
        <aside class="sidebar">
            <ul>
                <li><a href="#"> Anasayfa</a></li>
                <li><a href="#"> Hakkımızda</a></li>
                <li><a href="#"> İletişim</a></li>
            </ul>
        </aside>
        <main class="content">
            <div class="card">
                <img src="https://picsum.photos/id/258/200/200" alt="Rastgele Resim">
                <a href="#">Detayları Gör</a>
            </div>
            <div class="card">
                <img src="https://picsum.photos/id/259/200/200" alt="Rastgele Resim">
                <a href="#">Detayları Gör</a>
            </div>
            <div class="card">
                <img src="https://picsum.photos/id/256/200/200" alt="Rastgele Resim">
                <a href="#">Detayları Gör</a>
            </div>
            <div class="card">
                <img src="https://picsum.photos/id/255/200/200" alt="Rastgele Resim">
                <a href="#">Detayları Gör</a>
            </div>
            <div class="card">
                <img src="https://picsum.photos/id/254/200/200" alt="Rastgele Resim">
                <a href="#">Detayları Gör</a>
            </div>
            <div class="card">
                <img src="https://picsum.photos/id/253/200/200" alt="Rastgele Resim">
                <a href="#">Detayları Gör</a>
            </div>
            <div class="card">
                <img src="https://picsum.photos/id/252/200/200" alt="Rastgele Resim">
                <a href="#">Detayları Gör</a>
            </div>
            <div class="card">
                <img src="https://picsum.photos/id/251/200/200" alt="Rastgele Resim">
                <a href="#">Detayları Gör</a>
            </div>
        </main>
    </div>
</body>
</html>

style.css

/* Temel Stil */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background: #f4f4f4;
}

/* Grid Alanı */
.dashboard {
    display: grid;
    grid-template-areas:
        "header header"
        "sidebar content";
    grid-template-columns: 250px 1fr;
    grid-template-rows: 60px auto;
    min-height: 100vh;
}

/* Header */
.header {
    grid-area: header;
    background: #4a6ccc;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
}

.header .logo {
    font-size: 22px;
    font-weight: bold;
}

.header ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 20px;
}

.header ul li {
    position: relative;
}

.header ul li a {
    color: white;
    text-decoration: none;
    font-size: 20px;
    cursor: pointer;
}

.header ul li:hover ul {
    display: block;
}

.header ul li ul {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    list-style: none;
    padding: 10px 0;
    margin: 0;
    display: none;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    min-width: 130px;
    white-space: nowrap;
}

.header ul li ul li {
    padding: 10px 20px;
}

.header ul li ul li a {
    color: black;
    font-size: 16px;
}

/* Sidebar */
.sidebar {
    grid-area: sidebar;
    background: #4a6ccc;
    color: white;
    padding: 20px;
}

.sidebar ul {
    list-style: none;
    padding: 0;
}

.sidebar ul li {
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar ul li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* İçerik */
.content {
    grid-area: content;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px;
}

.card {
    background: white;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.card img {
    width: 100%;
    border-radius: 8px;
}

.card a {
    display: block;
    margin-top: 10px;
    text-decoration: none;
    color: #4a6ccc;
    font-weight: bold;
}