HTML Dersleri
CSS Dersleri
JavaScript Dersleri
İçindekiler
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;
}CSS Grid’in esneklik avantajları nelerdir?
CSS Grid, öğelerin yerleşimini ve boyutlandırmasını daha kolay ve esnek hale getirir. Grid sisteminin otomatik yerleşim özellikleri sayesinde, öğeler farklı ekran boyutlarına ve çözünürlüklere göre yeniden sıralanabilir ve boyutlandırılabilir. Ayrıca, grid-template-areas ile sayfa bölümleri kolayca tanımlanabilir, bu da tasarımı daha yönetilebilir kılar.
CSS Grid responsive (mobil uyumlu) tasarımlar için nasıl kullanılır?
CSS Grid, responsive tasarımlar oluşturmayı çok kolaylaştırır. @media queries kullanarak, ekran boyutlarına göre grid düzenini değiştirebilirsiniz. Örneğin, küçük ekranlarda yan menüyü gizleyip ana içeriği geniş bir alanda göstermek için grid-template-areas ve grid-template-columns özelliklerini yeniden tanımlayabilirsiniz.
Grid-template-areas özelliği nasıl çalışır?
grid-template-areas, sayfa düzenini tanımlamak için kullanılan bir özelliktir. Bu özellik ile, bir sayfanın hangi bölümlerinin hangi alanlarda yer alacağını belirtebilirsiniz. Alanlar, yazılı bir isimle tanımlanır ve bu isimler grid öğeleriyle ilişkilendirilir. Bu şekilde, her bir öğenin tam olarak nerede yer alacağı belirlenir.
Flexbox yerine CSS Grid kullanmak ne zaman daha uygun olur?
CSS Grid, özellikle çoklu bileşen içeren ve karmaşık düzenlere sahip sayfalarda daha uygundur. Eğer tasarımınızda öğeler hem yatay hem de dikey olarak hizalanacaksa, CSS Grid daha verimli ve kolay yönetilebilir bir çözüm sunar. Öte yandan, Flexbox daha küçük, tek eksende hizalanmış düzenler için tercih edilebilir.
CSS Grid ile her öğeyi sabitlemek mümkün mü?
Evet, CSS Grid ile öğeleri sabitlemek mümkündür. Örneğin, bir öğeyi sabit tutmak için
position: fixed;kullanabilir ve belirli bir alanda sabitlenmesini sağlayabilirsiniz. Ancak bu, grid düzeninin dışındaki öğelerle etkileşimi doğru şekilde yönetmek için dikkatlice kullanılmalıdır.CSS Grid, tüm öğeleri aynı büyüklükte yapmak için nasıl kullanılır?
CSS Grid ile tüm öğeleri eşit büyüklükte yapmak için, grid-template-columns ve grid-template-rows özelliklerinde belirli bir değeri kullanabilirsiniz.
Grid-template-columns ile auto-fit nasıl çalışır?
auto-fit, grid düzenindeki sütunları dinamik olarak ayarlamak için kullanılır. Bu özellik, belirli bir minimum genişlik değeri (minmax) ile kullanıldığında, sayfa genişliğine göre öğelerin sayısını ve boyutlarını otomatik olarak düzenler. Bu, esnek ve responsive bir tasarım elde etmek için oldukça yararlıdır.
Henüz yorum yapılmamış. İlk yorumu siz yapabilirsiniz!